Browser Bugs

IE6/7 中在 margin 为负值时失效

这一般是由于元素中设置了 zoom、width 或 height 属性所导致的（也许还有其它属性）。

解决办法很简单，给该元素的父元素设置 zoom 就可以了：

<div style="*zoom: 1;">
    <div style="margin: -15px;">
        Bios Sun
    </div>
</div>

不过每次都要这么设置确实挺麻烦的，而且在分模块开发中有的时候也很难去修改父元素的样式。
因此建议统一给所有元素设置 zoom 属性：

* {
    *zoom: 1;
}

当然这样也会带来一些问题（比如下面这个），但比起 IE6 正常模式下的那一大堆 bug，这样设置还是值得的。

IE6/7 中某元素若第一个子元素为 textarea 或某些 type 的 input 时，其左右外边距异常

这一般是由于该元素开启了 haslayout 所导致的，
下面给出的参考里有关于该问题的详细描述，所以这里就不多说，直接给出解决办法了。

解决方案

在 input 或 textarea 元素前添加一个触发了 haslayout 的空元素：

<span style="zoom:1;"></span>

参考：http://www.w3help.org/zh-cn/causes/RB1006

IE8 绝对定位的子元素，无法应用父元素中使用 filter 设置的半透明效果

如下面结构：

<div class="box">
    <div class="child"></div>
</div>

当应用如下样式时：

.box {
    width: 200px;
    height: 200px;

    background: #00f;

    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

.child {
    width: 100px;
    height: 100px;

    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10;

    background: #f00;
}

在 IE8 中，.child 元素将显示为纯红色，没有半透明效果。

不过解决方式也很简单，给绝对定位的子元素再次设置 filter 半透明即可。