CSS медиа-запрос не работает в IE 9 - PullRequest
Новая
       265

CSS медиа-запрос не работает в IE 9

8 голосов
/ 02 августа 2011

Я включил в свой дизайн несколько медиа-запросов, чтобы изменить ширину некоторых элементов страницы в зависимости от ширины браузера. Запросы выглядят так: 

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome, Safari и Firefox работают отлично, проблема только в IE. Я знаю, что все версии до IE 9 не поддерживают эту функцию, но они вообще не работают в IE 9. В чем может быть проблема?

Ответы [ 4 ]

13 голосов
/ 02 августа 2011

У вас включен режим совместимости?

2 голосов
/ 08 августа 2012

Убедитесь, что вы правильно указали DOCTYPE. Настоятельно рекомендуется, чтобы веб-сайты использовали тип документа HTML5 для поддержки самых разнообразных установленных и появляющихся стандартов (в данном случае: CSS3), а также самого широкого диапазона веб-браузеров: <!DOCTYPE html>

0 голосов
/ 21 октября 2015

используйте следующие условия 

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

вместо 

@media only screen (max-width:599px)

и убедитесь, что min-width равно 1px, поскольку IE9 не принимает 0px

0 голосов
/ 27 ноября 2011

К сожалению, min-width просто не поддерживается ни в одной версии IE.Поэтому, если вы используете это соглашение: 

<!---  CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">

<!---  CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">

<!---  CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">

Оно будет игнорировать все это.

Ссылка .

...