-1

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

这是我的 CSS 的样子

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

使用 PHP，我为每个浏览器的 HTML 提供了一个类，以防黑客攻击，即 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;
}

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

4

3 回答 3

9

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

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

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

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

于 2013-08-09T15:17:28.553 回答
0

我过去使用过这个库，它很棒（并且正在积极维护）：

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

于 2013-08-09T15:23:05.403 回答
0

您的 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;
}
于 2013-08-09T15:24:09.570 回答