Question

出于某种原因，我的媒体查询存在问题。

这是我的CSS看起来像

#main {
    font-size: 16px;
    font-size: 1.6rem;
}

使用PHP，我为每个浏览器的HTML提供一个类，如果是hack，即IE，就像这样：

<?php
   // ----| user agent (browser) |----------------------------
      $msie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
      $firefox = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
      $safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
      $chrome = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;
?>
<html class="<?php if($msie == true){ echo "msie "; } if($firefox == true){ echo "firefox "; } if($safari == true){ echo "safari "; } if($chrome == true){ echo "chrome "; } ?>" lang="fr">

问题是，为了我的CSS工作，我需要调用html类，如下所示：

.firefox #main,
.chrome #main,
.safari #main,
.msie #main {
    font-size: 16px;
    font-size: 1.6rem;
}

关于为什么会发生这种情况的任何想法？

Answer 1

注意：用户代理检测与“媒体查询”略有不同。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

另一个观察：我认为，您打算将这些CSS类添加到“body”标记，而不是“html”标记。

关于您关于IE黑客的问题，以下是“如何创建仅IE样式表”的重要资源 http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Answer 2

我过去曾使用过这个图书馆而且很棒（并且积极维护）：

https://github.com/cbschuld/Browser.php

Answer 3

您的css存在一些问题，您不应该多次使用#main，因为html应该是标记之前提到的

试试这个

<body class="<?php if($msie == true){ echo "msie "; } if($firefox == true){ echo "firefox "; } if($safari == true){ echo "safari "; } if($chrome == true){ echo "chrome "; } ?>" lang="fr">

CSS

.firefox,
.chrome,
.safari,
.msie, 
#main {
    font-size: 16px;
    font-size: 1.6rem;
}

CSS疯了

3 个答案: