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并不支持。