有没有办法为不同的浏览器设置不同的顶部或底部值？就像 Chrome 的“top：3px”，但 Firefox 的“top：5px”[重复]

Question

有没有办法可以为不同的浏览器设置不同的最高值？例如，Chrome 为 top:17px，Firefox 为 top:40px？

我尝试为一个类设置 top 值，但是 top 值在不同浏览器中的工作方式似乎不同，例如，我为搜索栏设置了 top:17px，它适用于 Chrome、Safari 和 Opera，但是当说到火狐，搜索栏的位置太高了。

然后我将它调整为 top:40px 然后它们是相同的。所以只是想知道是否有一种方法可以为 Firefox 浏览器设置不同的最高值，

喜欢 -moz-top: 40px？但是没有用

Answer 1

不使用 CSS，不。 -moz- 或 -webkit- 等供应商前缀用于尚未完全标准化的实验性功能。它们的目的不是为了改变特定浏览器的行为；像 top 这样的标准选择器的供应商前缀版本从未存在过。

如果您发现您的网站在不同浏览器上的呈现方式存在差异，您可能会遇到这些浏览器的用户代理样式表的差异。 （例如，由于您提到了搜索栏，输入元素上的边距或填充可能不同。）使用每个浏览器中的网络检查器来确定差异出现的位置，然后将属性应用于适当的元素以产生行为在所有浏览器中保持一致，而不是事后尝试纠正不一致。

Answer 2

我认为不可能在同一个文件中定位不同的浏览器，但您可以为此使用 Javascript 浏览器检测。

    if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../assets/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../assets/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../assets/explorerStyles.css" />');
}

对于旧的 IE 浏览器，您可以使用这些：

   <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="assets/myIEGeneralStyle.css" />
   <![endif]-->
   <!--[if IE 6]>
   <link rel="stylesheet" type="text/css" href="assets/myIE6Style.css" />
   <![endif]-->
   <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="assets/myIE7Style.css" />
   <![endif]-->
   <!--[if IE 8]>
   <link rel="stylesheet" type="text/css" href="assets/myIE8Style.css" />
   <![endif]-->