芳草苑

Tag: ie

  • Learned something basic

    今天又长知识了。

    首先，最简单的，更正了长久以来的想当然，php 下 explode(‘,’, ”) != array()，而是得到长度为 1 的数组，key 是数值 0，value 是空字符串。天哪，我有多少个程序是基于 explode(‘,’, ”) == array() 写下去的，这下影响大了，得好好查一查。

    其次，发现一个不晓得是 sshfs 的 bug 还是 gedit 的 bug。复制错误的过程是：用 Nautilus 或 Dolphin 打开 sshfs 挂载的目录，右击创建一个新文件。文件创建是成功的，属性是 774，用 gedit 打开它却无法保存，提示是没有写权限；但用 kwrite 编辑保存一切正常；用 gedit 再编辑 kwrite 编辑过的文件又能保存。或者，在右击创建一个新文件后，执行一次 chmod 774 filename，也能用 gedit 编辑保存了。

    再次，发现在 IE6 下，用 javascript 增大元素的尺寸（比如 jQuery widget 化，增加 border，增加 padding，等），会增大父元素的尺寸。哪怕父元素已用 css 静态赋以宽度值，宽度也会被改变，这是某些精心布局在标准浏览器下很好看，到了 IE6 就面目全非的一大原因。万恶的 IE6 啊，当然从另一方面，说明精心布局仍不够“精心”。为 IE6 布局好比极限运动，挑战好心情的极限；如果看到下属多花一倍时间 fix for IE6，挑战的也是老板的心理极限。

    然后，发现 jQuery gallery 里有两个 themes (Humanity, Vader) 的参数不太正常，多了 tr 参数，不知道怎么多出来的，删了似乎没影响。

    最后，如果父元素包含所有的子元素都是 float:left 或 float right 的话，不做特殊操作，父元素是没有高度的。父元素的后续元素用一个 clear:both 就能站到该站的位置，但如要为父元素本身画一个边框就稍有难度。最早我用的办法是在这个元素所有的子元素之后增加一个隐形的<div style=”height:0; clear:both;”></div>，但这个硬生生加进去的元素改变了 DOM 结构，破坏了语义，不够 SEO。在 Magento 里学到了另一个方法 :after { clear:both; }，如 .clearer 的示例，但要为低版本的 IE 专门写 clear after fix。我维护一份自己的 style.css，override Magento 原版的 style.css。我觉得这个任务就很“繁重”，如果再来一份自己的 style-ie.css，override Magento 原版的 style-ie.css，就为 clear after fix？总觉得小题大作。今天发现一个 clear after all floating children 的 neat solution，就是在父元素上设定 style=”overflow:auto; zoom:1″。overflow 让父元素调整到应有的高度，zoom 也是必须的，否则 IE6…，唉！

    最后的最后，发现 z-index 值在 IE6 下被重置的简单通用的 fix。这个问题的来源是若干个 position 后的元素，给它们设定 z-index，IE6 下根本不按设定值 layout，而且还摸不到规律。比如下拉菜单，有时被其他东西给压住。fix 是赋予下拉菜单 z-index 时，赋予父元素（整个菜单）更高的 z-index。

  • Limit table column width in IE6

    I have a 2×2 table coded like this:

    <table>
<tr>
<th id="r1c1">
Short heading
</th>
<th id="r1c2">
Short heading
</th>
</tr>
<tr>
<td id="r2c1">
Very very long content blah blah blah
</td>
<td id="r2c2">
Short content
</td>
</tr>
</table>

    In the td cell r2c1, if the content does wrap, it takes more width than r1c1, say r1c1 requires 100px width, and r2c1 requires 300px.

    But I want r2c1 content words wrap and its width limits to 100px. I put width style in the first row, i.e.:

    <th id="r1c1" style="width:100px">

    It does not work in IE6.

    Then I put width attribute on col, i.e.:

    <table>
<col width="100"/>
<col width="100"/>
...

    It does not work in IE6, either.

    Then I put width attribute in r2c1, i.e.:

    <th id="r2c1" width="100">

    It does not work in IE6, either.

    At last, I put width style in r2c1, i.e.:

    <th id="r2c1" style="width:100px">

    Finally it works in IE6.

    I knew td’s width attribute is deprecated but I didn’t know deprecated IE6 does not read deprecated attribute.

  • Stupid IE6

    我负责的一个网站的访问者中， 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

    我用“拉门”的方法做了个两端圆弧背景，宽度不固定的按钮，简言之就是用两个嵌套的 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

    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的由来？)。我很少收藏别人的网站，所以我就没指望别人来收藏我的网站。