首先,浏览器兼容性的问题有很多,要在工作中不断总结,这里根本不可能说全,非常欢迎您用评论的方式帮我补充。

IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,IE8能识别” 9″,但不能识别下划线”_”,而firefox两个都不能认识,却可以识别‘!important’。等等
书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法:

1:!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器

.browserTest {
border:20px solid #60A179 !important;
border:20px solid #00F;
}

在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:

2:*
IE都能识别*;标准浏览器(如火狐)不能识别*
区别IE与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
}

区别IE7,IE6与火狐

.browserTest{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}

3:_
IE6支持下划线,IE7和firefox均不支持下划线
区别IE7,IE6与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}

/*不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面*/

4:*+html 与 *html
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签

.browserTest { width: 120px; }      /* FireFox fixed */
*html .browserTest { width: 80px;}  /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */

5:9 专属IE8的Hack
.browserTest { width: 120px9; } /* IE8 fixed */

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:(所以此方法不建议使用。)

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/html]

以下是一些常用的CSS兼容技巧

1. 火狐下给div设置padding后会导致 width和height 增加, 但IE不会.(用IE的Hack解决)
2. 垂直居中,将 line-height设置为当前div相同的高度, 再通过vertical-align: middle;( 注意内容不要换行)
3. 水平居中,margin:0 auto;(当然不是万能)
4. 若需给a标签内内容加上样式, 需要设置 display: inline-block;
5. 浮动IE产生的双倍距离 ,在IE下,当一个div设置了float后,然后给他设置margin,就会出现加倍的margin,解决的办法是给div设置 display:inline。

&lt;div id=”float”&gt;&lt;/div&gt;
相应的css为
#float{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}

Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
6. IE和FF对盒模型的解释区别,所以宽度需要分别定义。例如:

#browserTest{ width: 650px !important;width: 648px;padding-left:2px;background:#fff; }

browserTest显示的宽度是650px;
IE Box的总宽度是:width+padding+border+margin宽度总和;
FF Box的总宽度就是:width的宽度,padding+border+margin的宽度在含在width内。
如果有BOX{WIDTH:”300″; PADDING:”5PX”;}
则BOX在IE的宽度应该为:310
而在FF的宽度则是300
所以在BOX有填充的情况下应该这样使用

BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}

7. ul标签在 FF下面默认有list-style和padding, 最好事先声明, 以避免不必要的麻烦;(常见于导航标签和内容列表)
8. 作为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;
9. 页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个div放到body标签下,然后为div指定一个类:
然后CSS这样设计:

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通 过Javascript的判断来实现最小宽度。
10. 万能float闭合(这里本人重点推荐)
将以下代码加入Global CSS 中,给需要闭合的div加上

&lt;style&gt;
/* Clear Fix */
.clearfix:after
{
content:&quot;.&quot;;
display:block;
height:0;
clear:both;
visibility:hidden;
}
*html .clearfix{
height:1%;
}
*+html .clearfix{
height:1%;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
&lt;/style&gt;
/**********************************************/
&lt;div id=&quot;wrap&quot;&gt;
&lt;div class=&quot;column_left&quot;&gt;
&lt;h1&gt;Float left&lt;/h1&gt;
&lt;/div&gt;
&lt;div class=&quot;column_right&quot;&gt;
&lt;h1&gt;Float right&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

Hack 的顺序
使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法
说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id=”bgcolor” 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.

#bgcolor {
 background:red !important; /* Firefox 等其他浏览器 */
 background:blue; /* IE6 */
}
*+html #bgcolor {
 background:green !important; /* IE7 */
}

IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的.
2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.

&lt;!-- 放置所有浏览器的样式 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; /&gt;
&lt;!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 --&gt;
&lt;!--[if IE]&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;style_ie.css&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]--&gt;

浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法.
网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就 永远不会过时 (IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。

补充:

.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}

好多css hack,最重要的是简单实用能解决问题就行了
总结:
9: IE6 IE7 IE8
*: IE6 IE7
_: IE6
*+: IE7(没多大用,了解就可以了)
—————————————-
最后再总结一下常见兼容问题:
1. DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)
2. FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行(已经过时)
3. FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4. FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !imp ortant 多设一个 height 和 width(IE也会增加,没用!)
5. FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式(IE不会忽略!这谁写的没用的东西!)
6. div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
7. cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
8. ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
9. float的div一定要闭合。(我们常说的清浮动)
当包含float的box的时候,高度自动适应在IE6下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做 到,这样就达到了兼容。
例如某一个wrapper如下定义:

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

10. margin加倍的问题。
设置为float的div在ie6下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
最后再说一遍:

IE6能识别“_” “+” “#” “@”, 同一属性有两个的只看后者 无论有没有 如果是两句它就能识别“!important”;
IE7能识别“+” “#” “@” “!important”,不能识别“_”;
FF能识别“!important”,不能识别“_” “+” “#” “@”;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

转载请注明来自:爱前端

2 thoughts on “IE6、7、8,火狐等浏览器常见兼容性问题整理

发表评论

电子邮件地址不会被公开。 必填项已用*标注