2015-02-25 7 views
0

я строю шаблон WP со следующим в заголовке:<! DOCTYPE HTML> удаляет медиазапросы стили

<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=9"> 

В таблице стилей я использую @media запросов, например:

@media only screen and (min-width: 1100px) { 
#wrapper {width:1280px;} 
} 

Style и шаблон был хорошо, пока я не заметил, что я пропустил доктайп, так что я добавил это в заголовок следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=9"> 

нет все стили не являются неверные, медиа-запросы, похоже, игнорируются, я не вижу стиля в инспекторе разработчика (Firefox, хром, сафари и т. д.).

Если я удалю стиль в медиа-запросах, добавьте его снова, стили будут удалены.

Проблема видна на всех browswer.

Есть ли что-то очевидное, что мне не хватает?

+0

Почему вы добавляете этот метатег? –

+1

использовать этот мета –

+0

http://jsfiddle.net/vhCLs/16/ 'DOCTYPE' не влияет на запросы СМИ. что-то еще не так. – Pogrindis

ответ

1

Doctype не влияет на ваши медиа-запросы.

Вы можете добавить поддержку.

<!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!--[if lt IE 9]> 
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
    <![endif]--> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0"> 

Они будут предлагать кросс-браузерную справочную службу и, скорее всего, решить вашу проблему.

Смотреть аналогичный пост: CSS3 Media Queries - does not work in some browsers (officially supporting MQ)

+0

Я пробовал это, но никакой разницы. – TJ15

+0

глупый вопрос, но @ TJ15 вы ** абсолютно ** уверены, что файл CSS был загружен? – Pogrindis

+0

defo загружен, все базовые стили и медиа-запросы находятся в одной таблице стилей, базовые стили в порядке. Все, что связано с медиа-запросами, теряется после добавления doctype. – TJ15

0

У меня была аналогичная проблема с классом стиля я претендуете на DIV.

.aclass { ... } в @media и min-width «исчезли», когда я добавил DOCTYPE HTML тега, а затем «вновь появились» и работали, когда я удалил DOCTYPE.

Явное включение данного элемента решается исчезающий акт, то есть ...

DIV.aclass { ... } работает должным образом.

Смежные вопросы