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. How to set a box shadow on left or right only or just on a single slide
  2. sessionStorage vs localStorage vs cookie applications
  3. Getting started with localStorage vs sessionStorage in html5
  4. css - align text to an image vertically
  5. Configuring sass with your nodejs applications