Question

我想为一个浏览器设置div的高度，所以在Firefox或其他任何东西看起来都不奇怪。

以下是一个例子：

#example {
  height: 200px; <!--How can I target Safari for example?--> 
  height: 250px; <!--How can I target Firefox for example?--> 
  height: 300px; <!--How can I target IE for example?--> 
  width: 250px;
  background-color: #FFF;
}

<div id="example">
  <img src="example.png">
  <p>Just some text.</p>
  <p>Click <a href="www.example.com">here</a> to visit www.example.com</p>
</div>

我已经尝试-moz-height: 250px;，但它没有用。

Answer 1

为此，您可以使用 JavaScript 。您可以访问名为navigator.appName的字符串。你可以这样说：

if(navigator.appName === "Google Chrome")
    // Do whatever here

用目标浏览器替换 Microsoft Internet Explorer 。

我真的希望这有帮助！

Answer 2

您可以使用条件评论。因此，您告诉代码为特定浏览器使用某个样式表。 Here's an article about it

以下是一个例子：

<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->

注意：这仅适用于Internet Explorer。如果您想为其他浏览器执行此操作，则需要使用JavaScript。这是JS的一个例子：

<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
    document.getElementById("stylesheet").setAttribute("href", "special_style.css"); 
}

Answer 3

您可以访问导航器对象并获取浏览器。

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;

然后

document.getElementById("example").style.height= y;

“y”它是一个变量，其值会根据浏览器而变化。

Answer 4

navigator.appName

它将为所有浏览器返回始终相同的值。我已经在Firefox，Chrome和Safari上进行了测试，所有浏览器均显示Netscape。但是，如果要定位特定的浏览器，则可以使用此代码

Firefox navigator.userAgent.includes("Firefox");

Safari navigator.userAgent.includes("Safari");

Chrome navigator.userAgent.includes("Chrome");

如何只定位一个浏览器？

4 个答案: