« 公交站牌的演化 | 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下的显示问题不可忽略。简单的方法是可以在页面文件中加入;



<meta http-equiv="x-ua-compatible" content="ie=7" />
将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: http://www.thinkjam.org/loveblog/trackbacktj.cgi/1248

Leave a comment

OpenID accepted here Learn more about OpenID

About this Entry

This page contains a single entry by 墨神 published on November 26, 2009 5:02 PM.

公交站牌的演化 was the previous entry in this blog.

移动和WAP应用 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.