Internet Explorer 6: Line-height / Replaced Element Bug

Internet Explorer 6: Line-height / Replaced Element Bug

Introduction
IE/Win continues to amaze us. This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.

View a live demo.
Strangely enough, this bug is triggered just by the simple presence of any replaced element: IMG, INPUT, TEXTAREA, SELECT and OBJECT.

Hacking Away
By carefully applying a top and bottom margin to the replaced element one can force the line-height to be about the same as intended. Unfortunately, this solution isn’t very universal and relies on a couple of simple requirements:

* The height of the replaced element needs to be known at all times.
* The height of all the replaced elements of the same type needs to be almost equal if you want to make use of the same CSS classes.

web.Frontend :: A fix to the IE6 line-height/replaced element bug :: April :: 2009

具体就是，如果在 replaced element 所在行有一个 hasLayout 的 non-replaced inline 元素，此问题即可解决。可以看一下直接修改自 PIE 那个 bug demo 的 fix Demo1 (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;}