firefox及ie不同版本间样式兼容性调试方法.

firefox及ie不同版本间样式兼容性调试方法.

最近一个项目主要涉及前端的交互优化，由于UED资源不足，所以一起做了一些前端的工作，

由于各浏览器的标准不一样，如要兼容像ie6,7,8及firefox，样式调整比较费事，现在css相关

的一些技巧分享一下，希望对大家有所帮助。

 

1、什么是css hack.

针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也

能得到我们想要的页面效果，这种针对不同的浏览器写不同的CSS code的过程，称之为CSS hack。

 

通过下表中的hack code就可以实现不同版本ie浏览器间的兼容：

hack code	ie6	ie7	firefox
_	√	×	×
*	√	√	×
!import	×	√	√

‘_’ : 只有ie6能识别_，如ie7,8下”width:100px; “的样式是OK，但ie6不够宽时，可以在”width:100px”后面增加一段”_width:105px;” 那么ie7,8不会解析_width:105px，但ie6会执行。

‘*’ : ie6,7都能识别*，但firefox不能识别；

‘!import’ : ie 6不能识别，ie7和ie8都能识别；

 

2、css调试工具

(1). ie8的调试工具，ie8下按F12能呼出开发人员开发工具，如下图：

选中图中的箭头鼠标按钮，在浏览器中选中需要优化的HTML对象，HTML窗口就会

定位到选中HTML对象的代码上(如上图左)，则右窗口中则显示当前对象的所有样式，

通过对右窗口中的样式调整，达到预期效果后，找到css文件的class，并作相同修

改。通过这个工具，修改样式后所见即所得，确定样式后再修改样式文件。

 

(2). Firebug，firefox下可以通过Firebug工具，来定位HTML对象并调试该对象的样式，如下图：