« 公交站牌的演化 | Home | 移动和WAP应用 »
November 26, 2009
CSS Hack实现IE6、IE7、IE8兼容
记得去年年底主页改版时,据Google
Analysis对网站的监测,当时的主流浏览器是IE6、IE7,和5%左右的Firefix。解决方案是将FF的CSS独立出来,在IE版CSS中进
行针对IE6和IE7进行的兼容性测试和CSS调试。在之前的博文(IE6 IE7 Firefox兼容性问题)中已经有所提及,此外CSS导航菜单,JS菜单等也同样存在浏览器兼容性问题。
今年,随着IE8的强势出击,越来越多的用户使用IE8,网页在IE8下的显示问题不可忽略。简单的方法是可以在页面文件中加入;
今年,随着IE8的强势出击,越来越多的用户使用IE8,网页在IE8下的显示问题不可忽略。简单的方法是可以在页面文件中加入;
<meta http-equiv="x-ua-compatible" content="ie=7" />
#example { background: red; } /* Moz FF */
* html #example { background: green; } /* IE6 */
*+html #example { background: yellow; } /* IE7 */
#example {
background: yellow; /* Moz FF */
background: red\9; /* IE(6/7/8) */
+background: blue; /* IE6 */
_background: green; /* IE7 */
background:/*\**/ white\9; /* IE8 */
}
此外,IE八对空格的解析与6/7不同,也有人提出网页空格引起CSS问题的解决对策,杜宇空格占位的做法,本人认为还是使用<font style="pading-right:20px;"></font>的形式更为合适。
顺便讲一个CSS Vs.表格的案例。
三年多了,至今还在使用DIV+CSS设计网页,虽然有越来越多的贡献者令这项工作似乎简单了,可是最近参加的一个项目令我重新开始反思CSS还是表格的问题。CSS对于浏览器的兼容始终是个不大却令人头痛的问题,表格是否更优?是否更省时省力?
表格是否也存在兼容性,我发现的也就是对百分比,边框等的解析问题,但基本不影像浏览。毕竟现在的宽带速度下,冗码都不是问题了,而且表格在定位上反而更简单快捷。但是考虑到内容对搜索的友好,SEO优化,内容显示的逐步性(边下载边显示),以及后期的维护和更新,尤其是页面数量庞大的网站,模板样式种类繁多的情况,CSS的调控会相对简单许多。
将IE8转为IE7的问题,对于旧版本的暂时方略还尚可,如果是新制作的页面,就不得不把IE8的问题提上来,解决方法还是CSS Hack,如下:
而且此代码对有些复杂布局,未必得效。
#example { background: red; } /* Moz FF */
* html #example { background: green; } /* IE6 */
*+html #example { background: yellow; } /* IE7 */
#example {
background: yellow; /* Moz FF */
background: red\9; /* IE(6/7/8) */
+background: blue; /* IE6 */
_background: green; /* IE7 */
background:/*\**/ white\9; /* IE8 */
}
此外,IE八对空格的解析与6/7不同,也有人提出网页空格引起CSS问题的解决对策,杜宇空格占位的做法,本人认为还是使用<font style="pading-right:20px;"></font>的形式更为合适。
顺便讲一个CSS Vs.表格的案例。
三年多了,至今还在使用DIV+CSS设计网页,虽然有越来越多的贡献者令这项工作似乎简单了,可是最近参加的一个项目令我重新开始反思CSS还是表格的问题。CSS对于浏览器的兼容始终是个不大却令人头痛的问题,表格是否更优?是否更省时省力?
表格是否也存在兼容性,我发现的也就是对百分比,边框等的解析问题,但基本不影像浏览。毕竟现在的宽带速度下,冗码都不是问题了,而且表格在定位上反而更简单快捷。但是考虑到内容对搜索的友好,SEO优化,内容显示的逐步性(边下载边显示),以及后期的维护和更新,尤其是页面数量庞大的网站,模板样式种类繁多的情况,CSS的调控会相对简单许多。
No TrackBacks
TrackBack URL: https://www.thinkjam.org/tjmanage/trackbacks/1248
Leave a comment