css opacity causing layout issues in IE9

Question

I came across a very interesting issue in IE9. When using filter: alpha(opacity=) or -ms-filter css property on a wrapping div the box model of the inner block elements get corrupted. In other words the collapsing of vertical-margin gets disabled and vertical-margin is added instead. I'm facing this issue only in IE9. IE7/8 is not affected.

Here's a jsFiddle with the isolated issue. Use the trigger anchor to activate the class that includes filter: alpha on the wrapping div. (IE9 only)

Any ideas why this is happening?

Thanks in advance

Answer 1

Any filter seems to do this ( jsfiddle.net/7BFd7 ).

I could only hypothesize about why it does that. It seems like using a filter sets the element to use some unknown display or position mode that doesn't do margin collapsing (like position absolute, inline blocks and floated or cleared elements).

anyway.. If you just want to hide that element, you could use visibility: hidden, which has the same effect as opacity: 0 and is supported everywhere.

If you want to animate the opacity, you'll have to do browser sniffing through conditional comments or Normalizr and animate opacity in IE9 and apply the filter in older IE versions.