本文探讨了Internet Explorer与Firefox浏览器在解析CSS时的不同之处，包括DOCTYPE对CSS处理的影响、垂直居中方法、特定CSS属性的支持差异等，并提供了一些解决兼容性问题的方法。
不同的浏览器对CSS文件，的解析方式不同，最著名的也就是占有垄断地位的微软的IE浏览器。多年以前微软就凭借着windows系统的优势捆绑着IE浏览器打击竞争对手，不过还有Mozilla firefox也具有着非常深厚的实例，和开源的优势，占据着一定的市场份额。它们对CSS和javascript有着不同的解析方式，就像是不同的眼光去看一件事务也是不同的。
IE VS FireFox CSS 兼容要点：DOCTYPE 影响 CSS 处理FIREFOX： div 设置 margin-left， margin-right 为 auto 时已经居中， IE 不行FIREFOX： body 设置 text-align 时， div 需要设置 margin： auto（主要是 margin-left，margin-right） 方可居中FIREFOX： 支持 ！important， IE 则忽略， 可用 ！important 为 FIREFOX 特别设置样式FIREFOX： 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 ！important 多设一个 height 和 width， 如：height：30px ！important； /* 这个 height 样式只对FIREFOX起作用 */ div 的垂直居中问题： vertical-align：middle； 将行距增加到和整个DIV一样高 line-height：200px； 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor： pointer 可以同时在 IE FIREFOX 中显示游标手指状， hand 仅 IE 可以FIREFOX： 链接加边框和背景色，需设置 display： block， 同时设置 float： left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格xhtml+CSS兼容性解决方案小集使用xhtml+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin：30px！important；margin：28px；}注意这两个margin的顺序一定不能写反，据阿捷的说法！important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring：30px；margin：28px}重复定义的话按照最后一个来执行，所以不可以只写margin：XXpx！important；2.ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值所以先定义ul{margin：0；padding：0；} IE支持自定义光标文件cursor：url（）
IE支持自定义滚动条颜色风格IE6中的select有永远处在最上的bug，而且css对select不起作用。
在form中，IE支持label，包括文字和图片；但是firefox不支持图片的label，点击图片不能让label for的radio或者checkbox产生效果。
IE和firefox都是支持onscroll事件的，但是firefox中textarea对此事件不支持。
CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持firefox支择相邻子选择符“>”，而IE6不支持（IE7支持）
firefox 对display的inline-block不支持，而IE均支持本v
IE VS FireFox CSS 兼容要点：DOCTYPE 影响 CSS 处理FIREFOX： div 设置 margin-left， margin-right 为 auto 时已经居中， IE 不行FIREFOX： body 设置 text-align 时， div 需要设置 margin： auto（主要是 margin-left，margin-right） 方可居中FIREFOX： 支持 ！important， IE 则忽略， 可用 ！important 为 FIREFOX 特别设置样式FIREFOX： 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 ！important 多设一个 height 和 width， 如：height：30px ！important； /* 这个 height 样式只对FIREFOX起作用 */ div 的垂直居中问题： vertical-align：middle； 将行距增加到和整个DIV一样高 line-height：200px； 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor： pointer 可以同时在 IE FIREFOX 中显示游标手指状， hand 仅 IE 可以FIREFOX： 链接加边框和背景色，需设置 display： block， 同时设置 float： left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格xhtml+CSS兼容性解决方案小集使用xhtml+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin：30px！important；margin：28px；}注意这两个margin的顺序一定不能写反，据阿捷的说法！important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring：30px；margin：28px}重复定义的话按照最后一个来执行，所以不可以只写margin：XXpx！important；2.ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值所以先定义ul{margin：0；padding：0；} IE支持自定义光标文件cursor：url（）
IE支持自定义滚动条颜色风格IE6中的select有永远处在最上的bug，而且css对select不起作用。
在form中，IE支持label，包括文字和图片；但是firefox不支持图片的label，点击图片不能让label for的radio或者checkbox产生效果。
IE和firefox都是支持onscroll事件的，但是firefox中textarea对此事件不支持。
CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持firefox支择相邻子选择符“>”，而IE6不支持（IE7支持）
firefox 对display的inline-block不支持，而IE均支持本v
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
