最全的CSS浏览器兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字,就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE与宽度和高度的问题
IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.页面的最小宽度
min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为
相关文档:
转自:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片跑马灯</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- 这里是第一个关键点,o ......
这5个有用的css属性可能你是比较熟悉的,但是很少使用到它们。我这里讨论的不是css3的新属性
。我提到的都是被所有浏览器支持的css2属性比如:clip、min-height、white-space、cursor和display。千万别错
过这篇文章,因为你会惊讶的发现他们是很有用的。
一、css clip(裁切)
clip裁切这个属性有点像是遮罩。它允许你 ......
/*
*创建人:蔺宜忠
*用途:学习css,应用于新闻系统
*/
*
{
/*把默认值设置为0*/
margin: 0;
padding: 0;
border-width: 0;
}
body
{
font-size: 14px;
}
a:link,a:visited
{
/*鼠 ......
CSS中的光标类型
语法:
cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )
取值:
auto
:
默认值。浏览器根据当前情况自动确定鼠标光标类型。
......
我最近在模仿博客园,制作一个个人博客,突然发现Footer部分浮动到了Content部分,我在Footer部分已经加了一句“clear:both;”,为什么还会出现这个问题。Footer部分的CSS代码如下: /*页面底部*/
#Footer {width:100%;height:70px;margin:0 auto;clear:both;} /*如果加了clear:both; 此部分就不会浮动了*/ ......