IE « #raynix#

24Oct/080

为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讨扰。

Tagged as: css, IE No Comments

11Apr/080

问候同被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“支持”了。

好在现在很多人用上了FireFox、Opera、Safari这些捍卫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)