Making max width work in internet explorer

If you have ever had to pull your hair out over why the max-width property is not having any effect on your markup in internet explorer, the solution is quite simple, yet baffling. It seems like Internet Explorer only honors the max-width property if the width of an element is also set. Here's the first(but not the ideal) solution

.myclass {
  width: 100%;
  max-width: 500px;
}

Although this will work in IE, it will break your layout in Safari. Another alternative is to target IE only for the width property. In the code below, I am gonna target IE 10 and above to apply the width property so that other browsers can stay sane.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .myclass {
      width: 100%;
   }
}

.myclass {
  max-width: 500px;
}

If you want to target other versions of IE in your CSS, see this answer. Hope this helps!

css 17 ie 1 internet explorer 1