IE（FF）中的$（window）.height（）问题
我编写了一个脚本，在我的页面中创建一个动态大小的div （#table）。 我还有一个菜单（#menu），内部有一个nav ，用于确定最小高度。 在Chrome和Safari中，一切正常，但在IE / FF中并没有那么多。 在两者中我都有同样的问题：如果我全屏加载页面然后我用最小化按钮最小化它，它需要错误的$(window).height() 。 如果我将它重新加载最小化，它可以正常工作，我甚至可以resize以使div调整好。 我把一些图像清楚地说明了我在说什么。
有了FF我还有另外一个问题。 当窗口大小大于菜单时，它总是在div的底部有一个空格。 它就像我在其他浏览器中应用的值不适合Firefox。 这个问题只与身高有关。 动态宽度工作正常。
我的浏览器版本如下：我认为它们是最新版本。
- Chrome 21.0.1180.89 m
- Safari 5.1.7
- Internet Explorer 9
- Firefox 14.0.1
这是我的javascript / jQuery代码：
$(function(){ $('#menu').css({'height':(($(window).height())-350)+'px'}); $('#table').css({'height':(($(window).height())-225)+'px'}); $('#table').css({'min-height':(($('nav').height())-15)+'px'}); $('#table').css({'width':(($(window).width())-135)+'px'}); $(window).resize(function(){ $('#menu').css({'height':(($(window).height())-350)+'px'}); $('#table').css({'height':(($(window).height())-225)+'px'}); $('#table').css({'width':(($(window).width())-151)+'px'}); }); });
页面样式的一部分 ：
/* NAV */ #line{ width:1px; position:absolute; left:147px; top:123px; bottom:0px; background-color:#b3b3b3; } nav{ width:147px; min-height: 100%; float:left; } nav ul{ list-style:none; padding:0px; margin:0px; } nav li{ display:block; width:147px; height:24px; line-height:24px; border-bottom: 1px solid #b3b3b3; text-indent:30px; -moz-box-shadow: inset 1px 1px 1px #ffffff; -webkit-box-shadow: inset 1px 1px 1px #ffffff; box-shadow: inset 1px 1px 1px #ffffff; } nav li a{ color:#808080; font-size:14px; text-decoration:none; display:block; } nav li:hover{ background-color:#cccccc; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } nav li .active{ background-color:#fdad06; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } nav li a.active{ color:#7e5303; } nav li:first-child{ border-top: 1px solid #b3b3b3; } nav #group{ width:148px; height:49px; font-size:14px; font-weight:bold; line-height:49px; text-indent:22px; } /* SECTION */ #menu_and_content{ width:auto; display:block; background-image:url(images/background.jpg); box-shadow:inset 0 5px 5px rgba(0,0,0,.2) } #menu_and_content #menu{ width:148px; vertical-align:top; border-right-style:solid; border-right-width:1px; border-right-color:#b3b3b3; padding: 0px 0px 20px 0px; } #menu_and_content #content{ width:100%; vertical-align:top; } #table{ overflow-x:scroll; overflow-y:scroll; width:500px; } #table table{ width:100%; font-size:11px; padding:25px 25px 25px 25px; text-align:left; } #table table thead th{ font-size:12px; font-weight:bold; color:#969696; cursor:pointer; } #content table td, th{ border-bottom:solid; border-bottom-color:#afafaf; border-bottom-width:1px; white-space: nowrap; padding:0px 5px 0px 10px; line-height:24px; } #content table td:first-of-type, th:first-of-type { padding-left:4px; } #content table tr:hover:not(#captions){ background-color:rgba(255,255,255,0.4); color:#3e3a34; cursor:pointer; } #content table input[type='checkbox']{ margin-top:2px; border-color:#949494; } #login_container{display:block; height:260px;}
以下是图片：
我遇到了与Firefox相同的问题，我解决了它添加到我的所有HTML文件。 在这个堆栈溢出问题中指出了解决方案：
为什么Firefox返回0作为$（window）.height（）的值
jQuery 1.8.1发行说明说
不要使用Quirks模式！ jQuery从未支持Quirks模式，我们也没有在Quirks中执行任何测试。 这可能会影响$（“window”）。height（）等值，并且jQuery 1.8 Quirks模式结果确实发生了变化，以支持一些现代浏览器function。 我们看到的大多数问题都来自于希望处于标准模式但在标记之前具有无效doctype或无关标记的开发人员。 如有疑问，请使用简单和简短。
尝试使用innerHeight()或outerHeight()而不是height()
填充/边框/边距可能不包括在内
请看这个博客。 他对浏览器中的屏幕测量进行了非常详细的研究
http://tripleodeon.com/2011/12/first-understand-your-screen/