CSS样式在IE6，IE7，FF下的区别与解决方案

对三种浏览器不兼容的解决方案：
第一种：
!important 来解决，因为Firefox和IE7认识!important，而IE6不认识！
如下面，使用时要注意顺序，不要用反了。

   1: <div style="color: black !important; color: white;">

   2:     firefox中显示为黑色文字，IE6中显示为白色文字

   3: div>

   4: <div style="color: white !important; color: black;">

   5:     firefox中显示为白色文字，IE6中显示为黑色文字

   6: div>

第二种：
IE7已经认识!important ，而且它跟IE6之间也存在一些差异。所以，可以针对它们写三个不同的样式，
下面分别给出IE6\IE7\Firefox的hack代码：

 

   1: #example { color: #333; }     /* Firefox */

   2: * html #example { color: #666; }     /* IE6 */

   3: *+html #example { color: #999; }     /* IE7 */

   4:  

   5: <div id="example">测试……div>

   6:  

   7: 或者

   8:  

   9: .example { color: #333; }     /* Firefox */

  10: * html .example { color: #666; }     /* IE6 */

  11: *+html .example { color: #999; }     /* IE7 */

  12:  

  13: <div class="example">测试……div>

那么在Firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们之间互不干扰。

 

三种浏览器之间的区别：

 

   1: 1. margin: FF下设置margin-left, margin-right 为auto 时已经居中, IE 不行

   2:  

   3: 2. text-align: FF下body设置text-align 时, div 需要设置margin: auto(主要是 margin-left,margin-right) 方可居中

   4:  

   5: 3. padding width height: FF下设置padding 后, div会增加height 和width的大小, 但IE 不会, 所以需要用!important 多设一个height 和width

   6:  

   7: 4. !important: FF和IE7: 支持!important, IE6 则忽略, 可用 !important 为FireFox 和IE7特别设置样式

   8:  

   9: 5. vertical-align: div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

  10:  

  11: 6.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

  12:  

  13: 7. a: FF链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。

  14: 参照menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

  15:  

  16: 8. ul标签在FF中默认是有padding值的，而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

  17:  

  18: 9. select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

  19: 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前FF并不支持。

转载于:https://www.cnblogs.com/HeroBeast/archive/2009/06/11/1501303.html