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

Posted 2023-03-06

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

【英文标题】：Is there a way to set different top or bottom value for different browser? Like "top:3px" for Chrome but "top:5px" for Firefox [duplicate]

【发布时间】：2019-06-13 06:33:15

【问题描述】：

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

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

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

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

【问题讨论】：

在我看来像 XY Problem。您能否使用minimal reproducible example 更新您的问题并解释您想要实现的目标？

【参考方案1】：

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

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

【讨论】：

可以做到：***.com/questions/952861/…

【参考方案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]-->

【讨论】：

这里有多个问题。 1) 浏览器嗅探极易出错，因为许多浏览器在其用户代理字符串中包含不一致或冲突的信息。例如，all 现代浏览器都有一个以字符串“Mozilla”开头的 UA。 2) 任何当前版本的 MSIE 都不再支持条件 cmets。

没错，我不建议使用其中任何一种来修复跨浏览器的标记不一致问题。