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

我有一个高度为300px的div和

溢出：自动。它在Chrome中看起来不错，但在Firefox中它会开始滚动页面。当我将高度降低到
高度时
：200px；`看起来不错

当html页面在Chrome和Firefox中打开时，我们可以给出不同的div高度吗？
您可以通过检测浏览器来编写特定于浏览器的代码。
以下是用于浏览器检测的链接


使用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函数并提供该函数的代码。
根据浏览器使用不同的样式表（css）

例如


var browser=navigator.appName；
如果浏览器==“Microsoft Internet Explorer”
{ 
文件。填写（“”）；
} 
如果浏览器==“Firefox”，则为else
{ 
文件。填写（“”）；
} 
其他的
{ 
文件。填写（“”）；
} 

或


我认为基于浏览器更改css文件的更好方法。我认为最好将样式功能与JavaScript分开。这将是一个良好的编码实践，维护性也将更加容易。
使用以下用于firefox的CSS块

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

并将下面的CSS块用于chrome

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

如何给出一个小示例var browser=navigator.appName；if browser==“Microsoft Internet Explorer”{document.write（“”；}if browser==“Firefox”{document.write（“”；}if browser==“Firefox”{document.write（“”；}）或navigator.appName不能在此处使用。因为对于chrome，safari和firefox的appName是Netscape。你能举个简单的例子吗
@-moz-document url-prefix() { 
  .selector {
     width:200px;
  }
}

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