8

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

4
  • 1
    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
    Commented Sep 17, 2012 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... Commented Sep 17, 2012 at 16:27
  • @Roman It would probably be good to post that as an answer so it can be accepted.
    – Shauna
    Commented Sep 17, 2012 at 18:08
  • 2
    @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
    Commented Sep 17, 2012 at 18:09

2 Answers 2

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.

0

One way to "unset" the filer in IE9 with just CSS while allowing it to apply in IE8 and lower is the following code that would only target IE9:

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

In this way, you'll then be only using opacity:value and not filter on that element in IE9.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.