A fix to the IE6 line-height/replaced element bug
2009.04.1709:16
[ xHTML/CSS ]
一个经典 bug，见 PIE：http://www.positioniseverything.net/explorer/lineheightbug.html。
大概描述一下：IE6 中，一个 replaced element 所在行的行高会有异常，具体就是 leading 似乎被吃掉了，如果连续多行都出现 replaced element，结果更糟糕，看起来就似乎 line-height 根本不起作用。PIE 那个页面没有给出 fix，刚捣腾出来一个。
具体就是，如果在 replaced element 所在行有一个 hasLayout 的 non-replaced inline 元素，此问题即可解决。可以看一下直接修改自 PIE 那个 bug demo 的 fix Demo1 (view with IE6)。
当然，如果给每个 replaced 元素手动加这个 fix，有点不靠谱，于是我又想起了 expression（当然是 without performance issue 的版本），哇哈哈……结果就有了这么一个较为简单的 fix：Demo2 (view with IE6)。
代码如下，自行变通：
* html input,* html img{
zoom: expression(function(ele){
ele.style.zoom = "1";
var iefixer = document.createElement("b");
iefixer.className="rlfix";
ele.parentNode.insertBefore(iefixer,ele);
}(this));
}
.rlfix{zoom: 1;}
以上。
跨墙来围观，我平时的写法是:
* html input,* html img {
_azimuth: expression(this.iefixer = this.iefixer || 'iefixer:'+this.insertAdjacentHTML('afterEnd','<b class="rlfix"></b>'),'inherit');
}
* html .rlfix {
zoom:1;
}
Comment by fireyy — 2009.4.17 @ 10:32
呃…代码被评论过滤掉了:(
http://snipt.org/TX
Comment by fireyy — 2009.4.17 @ 10:37
代码帮你 fix 了一下。
这种写法优势在哪里呢？另外好像没有重置 azimuth，应该有效率问题吧？
唉啦，此贴重点不在 expression 啦~ :D
Comment by old — 2009.4.17 @ 12:17
学习了，翻墙来感谢:)
Comment by ytzong — 2009.4.17 @ 12:54