css不透明度导致IE9中的布局问题

Question

我在IE9中遇到了一个非常有趣的问题。在包装div上使用filter：alpha（opacity =）或-ms-filter css属性时，内部块元素的框模型会被破坏。换句话说，垂直边距的折叠被禁用，而垂直边距则被添加。我只在IE9中遇到这个问题。 IE7 / 8不受影响。

这是一个带有孤立问题的jsFiddle。使用触发器锚点激活包装div上包含filter：alpha的类。 （仅限IE9）

为什么会发生这种情况？

提前致谢

Answer 1

任何过滤器似乎都这样做（jsfiddle.net/7BFd7）。

我只能假设它为什么这样做。似乎使用过滤器设置元素使用一些未进行边距折叠的未知显示或位置模式（如位置绝对，内联块和浮动或已清除元素）。

无论如何..如果您只想隐藏该元素，可以使用visibility: hidden，其效果与opacity: 0相同，并且在任何地方都受支持。

如果要为不透明度设置动画，则必须通过条件注释或Normalizr进行浏览器嗅探，并在IE9中设置opacity动画，并在旧的IE版本中应用过滤器。

Answer 2

解决问题的一种方法＆＃34; IE9中的文件管理器只有CSS，同时允许它在IE8及更低版本中应用，以下代码只针对IE9：

.css-selector {
    filter:value;
    opacity:value;
}
@media all and (min-width:0) { /* the min-width query hides below IE9 */ 
    .css-selector { 
        filter:none; 
    } 
}

通过这种方式，您将只使用不透明度：值，而不是在IE9中对该元素进行过滤。