CSS各浏览器兼容问题整理
目录
目录 (1)
一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)
1) 区别IE和非IE浏览器 (3)
2) 区别IE6,IE7,IE8,FF (3)
3) 区别IE6、IE7、Firefox (方法1) (4)
4) 区别IE6、IE7、Firefox (方法2) (4)
5) 区别IE7、Firefox (4)
6) 区别IE6、IE7 (方法1) (4)
7) 区别IE6、IE7 (方法2) (5)
8) 区别IE6、Firefox (5)
二、IE 的if条件Hack (5)
三、对齐产生的问题 (6)
1) div的居中对齐问题 (6)
2) div中文字垂直居中对齐的问题 (7)
3) 怎样使一个层垂直居中于浏览器中 (7)
4) 如何对齐文本与文本输入框 (7)
四、宽高问题 (7)
1) IE6下容器的宽度和FF解释不同 (7)
2) 页面的最小宽度 (8)
3) 为什么无法定义1px左右高度的容器 (8)
4) Firefox 关于DIV高度无法自适应 (8)
5) div重叠的现象 (9)
6) IE与宽度和高度的问题 (9)
7) div嵌套时，外层div高度不能自适应 (10)
8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)
9) padding，marign，height，width 的傻瓜式解决技巧 (10)
10) FORM标签 (10)
五、浮动 (11)
1) margin加倍的问题 (11)
2) DIV浮动IE文本产生3象素的bug (11)
3) 怎么样才能让层显示在FLASH之上呢 (11)
4) float的div闭合;清除浮动 (12)
5) 自适应高度 (13)
六、列表类 (13)
1) UL的padding与margin (13)
2) ul和ol列表缩进问题 (14)
3) list-style-image无法准确定位 (14)
4) LI中内容超过长度后以省略号显示的方法 (14)
七、链接 (14)
1) 游标手指cursor (14)
2) ,给a标签内内容加上样式, (15)
3) 链接(a标签)的边框与背景 (15)
4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)
5) 超链接访问过后hover样式就不出现的问题 (15)
八、背景、图片类 (15)
1) IE6下为什么图片下有空隙产生 (15)
2) 图片垂直于容器内 (15)
3) background 显示问题 (16)
4) 背景颜色无法显示 (16)
5) 背景透明问题 (17)
九、其他问题 (17)
1) 如何使连续长字段自动换行 (17)
2) 为什么web标准中IE无法设置滚动条颜色了 (18)
3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)
4) IE捉迷藏的问题 (19)
5) BOX模型解释不一致问题 (19)
6) IE6下绝对定位的容器内文本无法正常选择 (19)
7) CSS双线凹凸边框 (19)
8) IE选择符空格BUG (20)
9) ff不支持
scroll属性 (21)10) ff不支持数据岛绑定 (21)
11) ff不能用.click();方法打开链接 (21)
12) 目前FF2.0为止都不支持IE的name锚点 (22)
一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看
?在属性前加下划线(_)，那么此属性只会被IE6解释
?在属性前加星号(*)，此属性只会被IE7解释
?在属性值后面加"\9"，表示此属性只会被IE8解释
各浏览器CSS hack兼容表：
代码如下:
#test{
color:red; /* 所有浏览器都支持*/
color:red !important; /* Firefox、IE7支持*/
_color:red; /* IE6支持*/
*color:red; /* IE6、IE7支持*/
*+color:red; /* IE7支持*/
color:red\9; /* IE6、IE7、IE8支持*/
color:red\0; /* IE8支持*/
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/
1)区别IE和非IE浏览器
【区别符号】：「*」、「\9」
#tip{
background:blue; /*非IE背景藍色*/
background:red\9; /*IE6、IE7、IE8背景紅色*/
}
（详细查看）2)区别IE6,IE7,IE8,FF
【区别符号】：「*」、「_」、「!important」
#tip{
background:blue; /*Firefox背景变蓝色*/
background:red\9; /*IE8背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3)区别IE6、IE7、Firefox (方法1)
【区别符号】：「*」、「_」
#tip{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7背景变黑色*/
_background:orange; /*IE6背景变橘色*/
}
【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4)区别IE6、IE7、Firefox (方法2)
【区别符号】：「*」、「_」、「!important」
#tip{
background:blue; /*Firefox背景变蓝色*/
*background:green !important; /*IE7背景变绿色*/
*background:orange; /*IE6背景变橘色*/
}
【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5)区别IE7、Firefox
【区别符号】：「*」
#tip{
background:blue; /*Firefox背景变蓝色*/
*background:green !important; /*IE7背景变绿色*/
}
【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。
6)区别IE6、IE7 (方法1)
【区别符号】：「*」、「_」
#tip{
*background:black; /*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7)区别IE6、IE7 (方法2)
【区别符号】：「!important」
#tip{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。
8)区别IE6、Firefox
【区别符号】：「_」
#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox 和IE6，有效达成CSS hack。
其他说明：
1.如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声
称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
详细说明见：附件使用X-UA-Compatible来设置IE浏览器兼容模式_浏览器兼容教程_Div+CSS_网页制作_脚本之家
2.body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个
。3.还有其他写法，比如：
*html #test{}或者*+html #test{}
4.*+html 对IE7的hack 必须保证HTML顶部有如下声明：
"https://www.360docs.net/doc/675879078.html,/TR/html4/loose.dtd">
5.顺序：Firefox、IE8、IE7、IE6依次排列。代码的顺序一定不能颠倒了.
二、IE 的if条件Hack
使用IE专用的条件注释
〈!--其他浏览器--〉
〈link rel="stylesheet" type="text/css" href="css.css" /〉
〈!--[if IE 7]〉
〈!-- 适合于IE7 --〉
〈link rel="stylesheet" type="text/css" href="ie7.css" /〉
〈![endif]--〉
〈!--[if lte IE 6]〉
〈!-- 适合于IE6及以下--〉
〈link rel="stylesheet" type="text/css" href="ie.css" /〉
〈![endif]--〉
Except IE 除IE外都可识别
所有的IE可识别
仅IE6可识别
IE6以及IE6以下的IE5.x都可识别
仅IE7可识别
IE7以及IE7以下版本可识别
IE7以及IE7以上版本可识别
gt = Great Then 大于
lt = Less Then 小于
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
三、对齐产生的问题
1)div的居中对齐问题
方法一
FF: 父级设置text-align时，div需要设置margin: auto(主要是margin-left,margin-right) 方可居中。（原因：IE默认为居中，而FF默认为左对齐）。
代码：
方法二
FF IE 均能用
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度除以二
2)div中文字垂直居中对齐的问题
vertical-align:middle; 将行距增加到和整个DIV一样高height:200px;line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
3)怎样使一个层垂直居中于浏览器中
FF与IE 均能用
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
4)如何对齐文本与文本输入框
加上vertical-align:middle;
四、宽高问题
1)IE6下容器的宽度和FF解释不同
"https://www.360docs.net/doc/675879078.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode。关于qurks mode的相关知识,参考:
https://www.360docs.net/doc/675879078.html,/china/msdn/library/webservices/https://www.360docs.net/doc/675879078.html,/ASPNETusStan.mspx?mfr=true 2)页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
3)为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多
例如:overflow:hidden | zoom:0.08 | line-height:1px
4)Firefox 关于DIV高度无法自适应
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象。
如果是动态地添加内容，高度最好不要定义，浏览器可以自动伸缩。然而如果是静态的内容，高度最好定好。
解决方案：
情况一：不设高度
如果不给DIV设置高度，在Firefox中将不会因为里面的内容而撑开，而IE中就会自动根据内容撑开1.对DIV使用overflow:auto
2.当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，
对应CSS是：
.float_bottom {
clear:both;
height:0px;
padding:0;
margin:0;
border:0;
line-height:0px;
overflow:hidden;
}
情况二：固定高度
又想固定高度,又想能被撑开需要怎样设置呢？
办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义{
height:auto!important;
height:200px;
min-height:200px;
}
5)div重叠的现象
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
6)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;
}
height:auto!important; height:550px; min-height:550px;
7)div嵌套时，外层div高度不能自适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
#box {background-color:#eeeeee; }
#box p {
margin-top: 20px;
margin-bottom: 20px;
text-align:center;
}
p对象中的内容
解决方法：在P对象上下各加2个空的div对象CSS代码：1{height:0px;overflow:hidden;}
或者为DIV加上border属性。
8)div嵌套时y 轴上外层div 到内层div 的距离的问题
FF里y 轴上子div 到父div 的距离为父padding + 子marign
IE里y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里y 轴上父padding=0 且border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面
9)padding，marign，height，width 的傻瓜式解决技巧
div设置padding 后，FF会增加height和width，但IE不会（注意是技巧，不是方法）
●写好标准头
"https://www.360docs.net/doc/675879078.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
●高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，
子级全为浮动时底部补个空clear:both的div
●宽尽量用margin，慎用或减少使用padding，div 的实际宽= width + padding ，所以div写全 width
和padding，width用实际想要的宽减去padding定义的值。
10)FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好
在css中指定margin和padding
针对上面两个问题, css中一般首先都使用ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.
五、浮动
1)margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div 里面加上display:inline;
例如：
#IamFloat{
float:left;
margin:5px; /*IE下理解为10px*/
display:inline; /*IE下再理解为5px*/
}
这里细说一下block与inline两个元素：
●block //可以为内嵌元素模拟为块元素
元素的特点：总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素); 宽度缺省是它的容器的100%，除非设定一个宽度
，