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