古董越老越好, 浏览器可不是

今年初, 终于, 微软自己也受不了自己的IE6了. IE6倒计时网站开通后, 微软也呼吁网民放弃”好汉不提当年勇”的IE6浏览器. 遗憾的是, 尽管中国大陆毫无竞争的拿下这款娘家不疼亲家不爱的浏览器的最高份额, 但微软显然”don’t give it a shit”居然没有做个中文版出来 😀

十年前, 一款浏览器诞生了, 它的名字是IE6. 而现在是2011年, 是网络新标准的时代了. 是时候说再见了.

尽管我从2004年就抛弃IE6了, 但为了我的访客和用户们, 我不得不保留一份IE6作为测试使用(相信很多做过web前端的朋友都是如此, 并为了IE6而加班加点). 希望IE6早些安息吧.

如果想在网站中明确声明本站不支持IE6, 可以如此(下面应该写在<head></head>里面):

<script type="text/javascript">
	//CHECK FOR IE6
	function is_ie6(){
	    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined));
	}
	function alert_ie6(){
	    if(is_ie6()){
		alert('我注意到您还在使用微软IE6.0浏览器或者基于IE6.0内核的浏览器. ');
		alert('很抱歉本站在IE6.0下有点走样子, 因为本站采用很多新技术而IE6.0已经是10年前的产品了, 现在IE最新版是9.0, 更快也更安全, 也能更好的浏览本站.');
	    }
	}
</script>

然后在<body>里面加上onload=”alert_ie6()”就可以了. 脚本来源: http://www.stemkoski.com/how-to-detect-ie6-with-javascript/

最后, 除了IE, 更有很多好的浏览器等你选择: Mozilla FireFox, Google Chrome, Opera, Safari 都很不错. 😀

为IE6捉虫的一个小技巧

按照设计稿做好了CSS,但是唯独在IE6里面有着意外的表现:左栏和中栏之间的宽度比设计中指定值要大。是什么原因呢?我一时没想明白。于是我根据经验把可能影响到宽度的那个div的背景色改为红色,这样一看就明显了:

CSS里的设定是{padding:0; margin: 7px 0 0 10px;},就是说上面留白7px,右和下不留,左边留白10px。根据经验,我怀疑是那个10px导致,于是为IE6单独写了ie6sux.css,并在里面补上{padding:0; margin: 7px -10px 0 10px;},在右边给出-10px作为补偿。问题解决。

分析:IE6对留白(margin)的处理与众不同,留白的宽度似乎没有受到总宽度的限制,因此导致了右边超长出来。这应该算是个加减法级别的bug了。好在IE6用户会逐步转移到IE7,以后应该不必受此bug讨扰。

问候同被IE家族折腾的人们

这几天看内森被IE8折腾的不善,在此深表慰问。

其实,我也被IE家族折腾了很多年了。作为一个网虫,我可以一直使用FireFox浏览器,但是作为一个webmaster,我却绝对不能撇开IE不管,因为现实就是这样,我这有90%的网站访客使用IE。有选择么,没有。

技术层面上没什么好说的,在IE一统江湖的年代,IE就是事实标准,而W3C跟WC也差不多少了。这其实和其他行业(例如电信、广电)的垄断是一个道理:举个例子,如果IE说float: left是靠右边对齐,那所有写了float: left的图文就都会显示在窗口右边,而不管设计者的初衷是什么,也不管left这个词的含义是什么了。你可以站出来说IE你错了,但是所有IE用户会说你网页写错了。你只好昧着良心写float: right来使你的网页在IE上看起来是float: left的。于是你的网站被IE“支持”了。

好在现在很多人用上了FireFoxOperaSafari这些捍卫W3C标准的浏览器,M$终于也(被迫)开始向W3C靠拢了。于是webmaster们再一次被IE折腾,因为IE一点一点的向标准靠拢,也就是说新版IE和原来IE是不一样的。于是你昧着良心写的float: right居然在新版IE上靠右对齐了!你哭笑不得。

好在M$自己也有网站,为了让自己网站在IE6/7/8上看起来一样,M$是如此做的:

以下片段来自http://www.microsoft.com/
<style type="text/css">
@import url('http://i2.microsoft.com/shared/core/1/css/core.css');
</style>
<!--[if lt IE 7]>
<style type="text/css">
@import url('http://i2.microsoft.com/shared/core/1/css/ie6.css');
</style>
<![endif]-->
就是说,如果版本<IE 7,则装入ie6.css。看得出,M$主站是为IE7设计了,兼容IE <7。

上面的<!–[if lt IE 7]>html仅仅会被IE家族识别,而被其他浏览器忽略。这样,webmaster就可以把单独写给IE甚至是IE某个版本的css有选择的装上去了。当然,希望有一天,webmaster们不再需要这样的小技巧。

参考链接:

How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)