Ie11 doesn't apply media queries style

Question

IE11 ignore my media queries and always using the mobile css.

the weird thing is that if i'll change the browser width, even for just 1-2 pixel, the browser will render itself and the media queries are shown.

i tried css lint and i have no errors in my css.

i have nothing special in my css. just plain css like this:

.div_example{
  width: 100px;
}

@media (min-width: 768px){
  .div_example{
    width: 300px;
  }
}

Has anyone encountered this problem?

change `@media (min-width: 768px) ` to `@media all and (min-width: 768px)` or `@media only screen and (min-width: 768px)` — bulldozer, Jan 08 '17 at 19:29
thanks. but i forgot to mention in my question that i also tried @media all and and it didn't work. — Moran Gil, Jan 08 '17 at 19:38
Do you use meta viewport and width=device-width in header of your HTML? — bulldozer, Jan 08 '17 at 19:46
I added height:300px; and background: black to css .div_example an it work in IE11. `@media only screen and (min-width: 768px){ .div_example{ width: 300px; height:300px; background:#000; } }` — bulldozer, Jan 08 '17 at 19:50
@MoranGil do you have a live example ? Also what dimension is the browser when it fails ? — Gabriele Petrioli, Jan 08 '17 at 20:01
i don't think i can give a live example because it's work related. sorry. the weird thing is that all my pages are ok with IE11. just one page, same as all others that doesn't work. and resizing the browser width makes everything look ok. — Moran Gil, Jan 08 '17 at 20:04

score 3 · Answer 1 · answered Aug 17 '18 at 23:01

Had this exact thing occur. Just like you, if the window was resized the media queries would seemingly kick in. Was difficult to debug because opening up the developer console docked to the window also caused a resize and everything looked fine. Upon switching the developer console to a separate window I could see in the DOM explorer that the media queries were not applying.

Eventually I tracked it down to the media queries being inside of a style block that was in the body instead of the head. Relocating the style block to the head made IE11 correctly apply the media queries.

style in the body was not supported in IE11 (Using <style> tags in the <body> with other HTML) so it is not surprising there would be some weirdness.

score 0 · Answer 2 · answered Aug 06 '20 at 16:33

Ran across this issue with IE11 today. Min & Max width media queries were not being applied. However, media query blocks based on a fixed size or other attributes (like -ms-high-contrast: none) Were being applied.

Fix was to add only screen since all also didn't work.

Does Not Work

@media (min-width: 1000px){ ... }
@media all and (min-width: 1000px) { ... }

Does Work

@media only screen and (min-width: 1000px) { ... }

Those should be the exact same and I have no idea why one works and the other doesn't but maybe this will save someone else a headache.

score -1 · Answer 3 · answered Jan 08 '17 at 19:32

-1

You have to define the screen types, e.g...

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

answered Jan 08 '17 at 19:32

vicgoyso

636
1
14
35

score -1 · Answer 4 · answered Jan 08 '17 at 19:56

-1

It always use mobile styles because you are using:

@media (min-width: 768px)

This condition will be true if your window width is more than 768px, try this:

@media (max-width: 768px)

Styles inside that media query will be applied when window width is less than 768px and probably that's what you want to achieve.

answered Jan 08 '17 at 19:56

Mateusz Woźniak

1,479
1
9
10

2

They are using a mobile first approach so they are saying the CSS in the media query is not working and they always see the 100px width. They can't get their non-mobile CSS in the media query to activate. – Chase Aug 17 '18 at 23:04

Ie11 doesn't apply media queries style

4 Answers4

Linked