Как исправить код в CSS?

Question

[Антон Пархоменко]

Всем здравствуйте. При редактировании шаблона на Joomla, столкнулся с такой проблемой: вёрстка сайта плывет в браузере IE. В хроме, мозилле, опере - всё гуд. Страница сайта состоит из трех блоков: меню слева, текст по центру и меню справа. В IE все в один столбец. Путем проб выяснил, в чес ошибка кода CSS. Браузер IE не понимает параметры min-width и max-width. Как исправить эту часть кода?

@media (min-width:768px) { 
/* grid */
.col { margin-left: 2% }
.span_1 { width: 6.5% }
.span_2 { width: 15.0% }
.span_3 { width: 23.5% }
.span_4 { width: 32.0% }
.span_5 { width: 40.5% }
.span_6 { width: 49.0% }
.span_7 { width: 57.5% }
.span_8 { width: 66.0% }
.span_9 { width: 74.5% }
.span_10 { width: 83.0% }
.span_11 { width: 91.5% }
.span_12 { width: 100% }
}
@media (max-width: 959px) {#wrapper{ padding:10px!important;}#header-wrap { padding:10px 0 0 0!important;}}
.count-1 { clear: both; margin-left: 0; }

Answer 1

[Сергей delphinpro]

Браузер IE не понимает параметры min-width и max-width.

Последний браузер, который не понимал это, был IE6 :)

Наверное вы имеете ввиду, что браузер не понимает медиазапросы @media (min-width:768px)?
Тут проблема возникает в IE8 и ниже.

Решения два.
1. Подключить полифил respond.js

2. Подумать, а зачем настольному браузеру IE8 понимать медиазапросы? Может ему лучше подключить отдельный стилевой файл, в котором будет описана раскладка под конкретный размер экрана. Например 1024. Этого вполне достаточно, чтобы пользователи этого мамонта смогли пользоваться сайтом.

Comments

[Антон Пархоменко]

Спасибо большое. Подключил к странице respond.js и всё заработало!)

[Сергей delphinpro]

Лев Солнцев: Я еще под IE5.5 верстал страницы. Так что точно помню. :) IE7 норм понимал min max

Answer 2

[Ivanq]

https://msdn.microsoft.com/en-us/library/ms530813%...
min-device-width не работает? не пробовал пока, извините.