-2

我有一个由CSS文件样式化的HTML 。问题是我有几个浏览器兼容性问题。为了解决我的所有问题，我需要添加新的CSS规则（边距或高度）来解决我的问题。我将需要更改 5-6 个 div，具体取决于网页访问者的浏览器。例如，让我们以一个特定的名字命名：


<div>#main_menu

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;
}

现在，我需要根据 Web 浏览器添加新的 CSS 特定规则：

  • 对于Mozilla Firefox，我需要设置：height: 34;而不是height: 35;
  • 对于Opera，我需要设置：top-margin: -3px;
  • 对于Internet Explorer，我需要设置：top-margin: -2px;

我试图做这样的事情，但不幸的是我不知道它是如何工作的：

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;

-moz-height: 34; /* for Firefox */
-o-top-margin: -3px; /* for Opera */
-ms-top-margin: -2px; /* for IE */
}

PS：CSS代码在 Chrome 和 Safari 中运行良好。

谢谢你的时间！

4

4 回答 4

1

你所问的不能用 CSS 来完成。

CSS 规范提供的粒度级别是可选地包含特定文件（您已经知道）。结合某种程度的浏览器检测，您可以提供覆盖“基本”样式中存在的样式。

为此目的使用 Internet Explorer 的条件注释是很常见的：

<link rel="stylesheet" type="text/css" href="base.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

供应商特定的前缀（-ms、-moz、-webkit 等）不适用于针对特定浏览器。它们是供应商提供的专有样式，用于提供一些正式的 CSS 规范中不存在的功能。通常，它们将是基于开发中的 CSS 规范的“实验性”属性，旨在随着规范的正式化而被弃用。

于 2013-01-30T17:29:21.187 回答
0

仅通过 CSS 来定位特定浏览器没有最佳实践方法。如评论中所述，供应商前缀（例如 ）-moz用于实验性或开发中的规范，并且在删除或“发布”该功能时从每个浏览器中删除。

如果您绝对必须进行浏览器定位，请尝试使用 JavaScript 来检测浏览器，并在 body 标签中添加一个标识类。然后，您可以编写如下规则：

body.firefox #main-menu { height: 34; }
于 2013-01-30T17:34:04.237 回答
0

简单的解决方案，只需使用这个 JS 库，您就可以轻松地为每个浏览器/操作系统组合应用样式：

浏览器类.js

这样，您将在 body 标记上获得一个类名，其中包含当前名称和浏览器版本以及使用的操作系统。

在你的情况下：

包含文件后：

<script src="js/browserclass.js"></script>

全站设置，您的原始设置：

#main_menu{
  widht: 800px;
  height: 35px;
  line-height: 35px;
}

Firefox 特定设置：

body.ff #main_menu{
    height: 34px
}

Opera 特定设置：

body.opera #main_menu{
    top-margin: -3px;
}

IE浏览器：

body.ie #main_menu{
    top-margin: -2px;
}

注意：我建议按版本检查 IE，以确保您获得相同的最终结果 [如果 IE] statmenets 自 IE10 以来已被弃用，因此这是解决方案

于 2014-04-15T20:37:30.113 回答
-1 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#selector{ /* Chrome or Safari */
    background: green;
}

#selector{ /* Internet Explorer 8 or bigger vers. */
    background: pink\9;
}

@-moz-document url-prefix(){ /* Firefox */
#selector{
background: lime;
}
}

doesnotexist:-o-prefocus, #selector{ /* Opera */
  background: red;
}
</style>
</head>

<body>
<div id="selector" style="padding:100px;">ss</div>
</body>
</html>
于 2013-01-31T09:06:15.760 回答