像素盒子

最近又遇到一个IE6的bug 🙁

<hr />
<img src="CG_title.jpg" alt="" />
<hr />

这段代码在Firefox下一切正常，可是在IE 6 中却是惨不忍睹。

在Firefox 1.5中：同样的代码在IE 6中的显示效果：

而且可以发现，无论用各种方法都无法调整hr的上下边距。

为此我在google中搜了好长时间，最后在ms的网站上找到一篇机器翻译的文章，读起来极其恶心，但好在代码还是能看懂的。

解决方法是用经css修饰的div来代替hr标签，代码如下：

div.HrRule {
    border: 1px solid #C0C0C0;
    background-color: #C0C0C0;
    height: 0.5px;
    margin-top:0.5px;margin-bottom:2px;
    width:100%
}
div.HrRule hr { /* for CSS1 browsers */
    display: none;
}
div.HrRule * { /* for CSS2 browsers */
    display: none;
}

<div class="HrRule"><hr /></div>
<img src="CG_title.jpg" alt="" width="100%" />
<div class="HrRule"><hr /></div>

修改后的效果：

Firefox 1.5IE 6

虽然在Firefox中，hack过后的代码中的灰色横条看起来比上面的宽了些，但为了兼容，只能忍受了。

感叹一下，本来好端端的一个<hr />就能搞定的事情，现在却添了这么多代码，效果也不如原来。

但转念一想，现在写前端代码应该还算是比较容易的，毕竟需要中国程序员考虑的也就是IE6和Firefox两个浏览器而已，IE6 bug虽多，但这么多年无数的程序员的积累下，大都已经被找出来了而且基本上都有了解决方案，在可以控制的范畴之内。

真正的炼狱时代，应该是在IE 7、IE 6和Firefox三分天下的时候，苦命的coder不仅要对付古怪的IE 6、注意不知底细的IE 7还要努力与Firefox兼容，呵呵，恐惧中。