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 半透明即可。