Question

有没有一种方法可以为不同的浏览器设置不同的最高价值？例如，对于Chrome，top：17px，但是对于Firefox，top：40px？

我试图为一个类设置最高值，但是最高值在不同浏览器中的工作方式似乎有所不同，例如，我为搜索栏设置了top：17px，它适用于Chrome，Safari和Opera，但是当对于Firefox，搜索栏的位置太高了。

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

-moz-top：40像素？但这没用

Answer 1

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

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

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]-->

有没有办法为不同的浏览器设置不同的最高或最低值？类似于Chrome的“ top：3px”，而Firefox的“ top：5px”

2 个答案: