Search code examples
cssmedia-queriesinternet-explorer-11ie11-developer-tools

CSS is broken in IE11 until Developer Tools are opened


I have a modal widget that shows in a page, and when I open it in IE11 it is partially broken, but as soon as I resize the window or open Developer Tools, everything gets fixed.

It seems that some of media queries are applied, like some of the rules for very small screen are used in a big one. But it is true not for all elements.

What am I doing wrong?


Solution

  • Since the issue was with media queries, I searched and found another answer to a similar question. Seemed to be my case: one of the symptoms was that lowest resolution media query was acting.

    Answer: https://stackoverflow.com/a/25850649/171278

    Solution: the lowest resolution media query should also have min-width, just add min-width: 1px, and it won't be activated on page load.

    @media only screen and (min-width:1px) and (max-width:800px)