Question

我的div有height: 300px;和overflow: auto;。它在Chrome中看起来不错，但在Firefox中它会开始滚动页面。当我将高度减小到height时：200px;`看起来不错。

在Chrome和Firefox中打开html页面时，我们可以给出不同的div高度吗？

Answer 1

将以下CSS块用于firefox

@-moz-document url-prefix() { 
  .selector {
     width:200px;
  }
}

并使用以下CSS块进行chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector {
     width:300px;
  }
}

Answer 2

您可以通过检测浏览器来编写特定于浏览器的代码。以下是浏览器检测的链接Browser detection in JavaScript?

Answer 3

根据浏览器使用javascript提供条件

if (!!window.chrome == true) {
  //condition for chrome
 }
 else if (typeof InstallTrigger !== 'undefined') {
 //condition for firefox
 }
 else if (/*@cc_on!@*/false == true) {
       //condition for safari
    }
    else if (!!window.opera || navigator.userAgent.indexOf('Opera') >= 0) {
        //condition for opera
    }
    else if (Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0) {
        //condition fo IE
    }

这个javascript代码将检测浏览器。为body提供onload函数并给出该函数的代码。

Answer 4

根据浏览器使用不同的样式表（css）。

E.g。

<script type="text/javascript"> 
    var browser=navigator.appName; 
    if browser == "Microsoft  Internet Explorer" 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">"); 
    } 
    else if browser == "Firefox" 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"Firefox.css\">"); 
    } 
    else 
    { 
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">"); 
    } 
</script>

或

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

Answer 5

我认为更好的方法是根据浏览器更改css文件。我认为最好将样式功能与JavaScript分开。这将是良好的编码实践，可维护性将更容易。

如何为不同的浏览器设置不同的高度？

5 个答案: