Posts Tagged ‘ie’

Stupid IE6

Tuesday, May 25th, 2010

我负责的一个网站的访问者中, IE6 用户仍占 6.2%,这个比例不尴不尬。改版初期对他们照顾不够,今天下狠心花了时间去测试 IE6 下的兼容性。几小时之后,IE6 下都能完全正常显示了,我也多了一些心得。

  1. 如果要加层,先设置该层 text-align:left,否则 IE6 下与层有点关系的元素,不管它是在层内还是层外,位置会摆置得莫名其妙。特别是当看到层外元素整体摆错位置,我更莫名其妙,实在搞不懂 IE6 对层的理解是什么。如果一开始就对层进行初始化({ text-align:left; position:relative; })就会节省很多时间。
  2. 避免使用高级的 css 语法,比如多 class 的连贯,.class-a.class-b { color:red; }。本希望该样式只应用于同时具有 class-a 和 class-b 元素,结果 IE6 不理解。如果 IE6 对不理解的 selector 作忽略处理倒还好,可是 IE6 把该样式应用到了所有 class-b 元素(只具有 class-a、不具有 class-b 的元素未受影响),IE6 是不是显得不懂装懂?祸害很大,害我多花了一小时在找被错误影响了的 class-b 元素的原因。如果实在想要多 class 的连贯的 selector,那比较可行的办法是用 jquery 来保证跨浏览器的兼容性,即 $jquery(’.class-a.class-b’) 。

题外话:很久前我写过一篇Cross-browser CSS。今天多了两点心得,本想直接写入以前的文章。转念一想不对,今天的心得是今天的,以前的心得是以前的,以后万一我来翻看自己的文章,我也想从中看出我的成长历程,混在一起就看不出历程了。但从心得角度讲,最好把所有 cross-browser css 的内容写在一起,否则,若干年后我再看Cross-browser CSS那一页时不一定想起今天补充的两点。似乎没什么好办法(即使用 related posts 也比较勉强)。

Use zoom:1 as a generic IE css fix

Friday, May 21st, 2010

我用“拉门”的方法做了个两端圆弧背景,宽度不固定的按钮,简言之就是用两个嵌套的 span,应用了以下 css


span { background:url(round-corner.gif) 0 50% no-repeat; padding:0 0 0 12px; }
span span { background-position:100% 50%; padding:0 12px 0 0; }

但是在 IE6 下,按钮左边界是圆弧,右边界仍是直角。如果我在 span 上增加 width:100%,左右倒都是圆弧,但由于 IE6 对 width 的定义不同于其他浏览器,按钮的宽度被改变了。

在没有 width 可用的情况下,怎么办?用


span {zoom:1; }

延伸阅读的话,在 IE6 下某些元素没有 layout,用 {zoom:1; } 可以让这些没有 layout 的元素表现得象有 layout (我这么表述可能不准确),从而改善低版本 IE 对 css 标准的理解。{zoom:1; } 是 IE fix 的一个捷径,目前没有发现对其他浏览器带来副作用。

favicon.ico in IE

Friday, August 8th, 2008

IE is a nightmare – 我对此体会越来越深刻。

想让自己的网站容易识别,就得从很多方面下功夫。个性化的,或与logo相配的favicon.ico就是要做的一件事情。如何让自己制作的favicon.ico在地址栏里显示出来,这点小事在Firefox下就是a piece of cake,在IE里我一直是忽视的,当我想起要重视的时候,为此整整折腾了一个晚上。所以我说IE is a nightmare。

首先,favicon.ico必须是标准的icon文件。之所以这么说,是因为有人说把favicon.bmp,或favicon.gif,或favicon.jpg格式保存的文件改名成favicon.ico就可以了,其实这样改名来的favicon.ico在Firefox下是能显示的,如果有人喜欢看重结果,不追求过程的话,Firefox下让favicon.ico出现的结果已经达到。但改名来的favicon.ico并不是真正的ico格式,IE是不认可的。对于这一点,错不在IE。我是追求完美的,要做就做一个正宗格式的favicon.ico,32 x 32 或 16 x 16都可以,我喜欢32 x 32,因为我没有ebay那么高水平,16 x 16还能尽显细节。

尽管有了标准格式的favicon.ico,能否在IE下显示还受很多因素制约。总的来说,我的感觉是,我按W3C标准出牌,但IE不按标准接牌,为兼顾到IE用户,我要付出成倍的时间。当然,我以外还有很多人,IE浪费了很多人宝贵的时间。好了,不发牢骚,让我总结一下IE下的制约因素。

  1. 虽说把favicon.ico放在网站的document root下就可以,但html里要有
    <link rel=“shortcut icon” type=“image/x-icon” href=“/favicon.ico” />
    更保险。我发现google等几个站点都没有这一条语句,但它们的favicon.ico在IE里的显示成功率还是很高,对此我百思不得其解。
  2. href绝对不能带域名,例如,不能写成
    <link rel=“shortcut icon” type=“image/x-icon” href=“http://example.com/favicon.ico” />
  3. 如果更新了favicon.ico,一定要清除cache才能看到更新,否则,无论怎么刷新都是不会更新的favicon.ico。
  4. 清除了cache,还得关闭IE,否则,你还是看不到更新。
  5. IE在清空cache后第一次运行,访问任何网站,你都无法看到它们的favicon.ico。
  6. 清空cache后,让IE运行一次,随便访问一个网站,让cache里留下点东西,关闭IE,再打开IE,然后你才可以看到更新后的favicon.ico。

复杂吧,我搞得头都大了,才总结出这么点经验,不保证在你的机子上IE也是按这个“规律”运行的。因为,你知道的,IE是反常规出牌的。

以上说的还是较新版本IE7,至于IE6,我劝你还是断了让favicon.ico在IE6的地址栏出现的念头。因为,你不光要符合以上条件,你还得让你的用户把你的网站收藏为favorite,IE6在访问被收藏的网站时,才会显示favicon.ico (这大概是favicon的由来?)。我很少收藏别人的网站,所以我就没指望别人来收藏我的网站。