CODEWITHSUNDEEP
css
Jason Howard
Jason Howard

Reputation: 1586

IE 10+ specific css rules not taking precedence in IE

According to this answer, the following can be used to target IE10 and IE11:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* css specific to IE10 and IE11
}

So I'm my css file, I've got a rule, such as the following.

.bigbox {
display: flex;
}

As I don't want IE to flex this box, I've got the following BELOW the initial declaration:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .bigbox {
  display: default;
   }

}

When I inspect the div using the developer tool in IE, I can see that IE11 sees both rules, but it gives the non-IE specific rule priority and, as a result, flexs the box. Why does it do this? Is there a way to prevent this?

I've even set the IE declaration to !important and that does nothing either.

Thanks!

Upvotes: 0

Views: 24

Answers (1)

Foaster
Foaster

Reputation: 656

There's no such thing as "display: default".

Try "display: initial;" or something more fitting (inline, block).

//EDIT: See here for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Upvotes: 1

Related Questions