最近一个项目主要涉及前端的交互优化,由于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对象并调试该对象的样式,如下图:
posted on 2010-06-29 11:03
josson 阅读(2180)
评论(0) 编辑 收藏 所属分类:
web开发