Question

我在标题中构建了一个带有以下内容的wp模板：

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

在样式表中，我使用@media查询，例如：

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

样式和模板很好，直到我注意到我错过了doctype，所以我将其添加到标题中，如下所示：

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

并非所有样式都不正确，媒体查询似乎被忽略，我在开发人员检查器中看不到任何样式（Firefox，chrome，safari等）。

如果我删除了媒体查询中的样式，请再次添加样式，删除样式。

问题见于所有浏览器。

我有什么明显的遗失吗？

Answer 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)

Answer 2

我在申请DIV的样式类中遇到了类似的问题。

@media中的{p> .aclass { ... }和min-width“消失”，当我添加DOCTYPE html标记，然后“重新出现”并在我删除DOCTYPE后工作。< / p>

明确地包括有问题的元素解决了消失的行为，即......

DIV.aclass { ... }正常运作。

删除媒体查询样式

2 个答案: