适用于所有浏览器(非Chrome )的CSS设置

Question

我在css中有如下设置：

.row-height {
  height: 100% ;
}

我希望所有的浏览器都能有这个设置，但Chrome不能。有没有办法做到这一点。金姆

Answer 1

您不能直接在CSS中检查特定的浏览器，但您可以在JavaScript中的BODY元素上设置一个类，如下所示：

if (navigator.userAgent.match(/Chrome/))
  document.body.classList.add('chrome');

完成此操作后，您可以为该特定浏览器添加CSS规则。比如使用自动高度，而不是只在Chrome上使用100%：

body.chrome .row-height { height: auto; } 

不用说，最好不要这样做，因为这会增加开销，并且容易以意想不到的方式崩溃。对于您在CSS中直接面临的特定问题，可能有不同的解决方法。

然而，有时有必要使用像这样的有针对性的CSS来解决浏览器的错误，所以如果你必须这样做，不要感到“糟糕”。

Answer 2

我能想到的最简单的方法是用Javascript (1)检测浏览器，如果检测到Chrome，就改变页面的CSS文件(2)。这种解决方案的缺点是，您必须维护两个几乎相同的CSS文件，这在开发过程中可能比较麻烦。

因此，您的代码可能如下所示：

<link id="styleSheet" rel='stylesheet' href='style.css' type='text/css' media='all' />
<script>
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
if(isChrome) {
     document.getElementById('styleSheet').href = "styleForChromeOnly.css";
}
</script>

或者，如果你不想在代码中一次性使用变量，或者你喜欢意大利面：

<link id="styleSheet" rel='stylesheet' href='style.css' type='text/css' media='all' />
<script>
if(!!window.chrome && !window.opera && navigator.userAgent.indexOf(' OPR/') >= 0) {
     document.getElementById('styleSheet').href = "styleForChromeOnly.css";
}
</script>

(1) How to detect Safari, Chrome, IE, Firefox and Opera browser?

(2) How can you change the attached CSS file with Javascript?