Be the first user to complete this post

  • 0
Add to List

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!



Also Read:

  1. sessionStorage vs localStorage vs cookie applications
  2. Two column layout in css
  3. Understanding the CSS 3 transition property syntax
  4. position:absolute
  5. pseudo elements vs pseudo classes
  6. What are reflows and repaints and how to avoid them
  7. css - vertically align text
  8. box-sizing