Take the 2-minute tour ×

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

share|improve this question
Any filter seems to do this ( jsfiddle.net/7BFd7 ). But, the CSS property opacity works in IE9, and doesn't cause the glitch. So, using the filter only in an [if lt IE 9] commented style could be a work around. –  Roman Sep 17 '12 at 16:16
Thanks for the quick reply. I already thought about this since I'm using boilerplate in all of my projects. However this behavior is indeed very odd... –  travisbotello Sep 17 '12 at 16:27
@Roman It would probably be good to post that as an answer so it can be accepted. –  Shauna Sep 17 '12 at 18:08
@user997951 - That's because, IIRC, Microsoft is phasing out the use of filters in favor of the standard CSS stuff (where possible, at least). The filter conflicts with the CSS. I think the filter thing is a known issue (and basically a "working as intended" sort of thing). –  Shauna Sep 17 '12 at 18:09
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
add comment

Your Answer


