Be the first user to complete this post Login To Mark Completed

0

Add to List Add To List..(Max 5) Close Save

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. Configuring sass with your nodejs applications
2. Getting started with localStorage vs sessionStorage in html5
3. sessionStorage vs localStorage vs cookie applications
4. What are reflows and repaints and how to avoid them
5. Two column layout in css

---