IE 和 FF 中的 $(window).height() 问题

Question

我编写了一个脚本来在我的页面中创建一个动态大小的div (#table)。我还有一个菜单（#menu），里面有一个nav，它建立了最小高度。在 Chrome 和 Safari 中一切正常，但在 IE/FF 中就没有那么多了。在这两种情况下，我都有同样的问题：如果我全屏加载页面，然后使用最小化按钮将其最小化，则会出现错误的$(window).height()。如果我重新加载它最小化，它可以正常工作，我什至可以调整大小以使 div 调整好。我放了一些图片来清楚我在说什么。

对于 FF，我还有另一个问题。当窗口大小大于菜单时，它总是在 div 的底部有一个空格。就像我在其他浏览器中应用的值不适合 Firefox。 这个问题只是高度。动态宽度没问题。

我的浏览器的版本如下：我认为它们是最新的。

• 铬 21.0.1180.89 m
• Safari 5.1.7
• Internet Explorer 9
• 火狐14.0.1

这是我的 javascript/jQuery 代码：

<!-- Menu resize -->
<script type='text/javascript'>
$(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'});
    });
});
</script>

部分页面风格：

/* 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;}

还有图片如下：

Answer 1

尝试innerHeight() 或outerHeight() 而不是height()

内边距/边框/边距可能不包括在内

Answer 2

我在使用 Firefox 时遇到了同样的问题，我通过添加到我的所有 HTML 文件中解决了这个问题。这个堆栈溢出问题指出了解决方案：

Why does Firefox return 0 as the value of $(window).height()

jQuery 1.8.1 发行说明说

不要使用 Quirks 模式！ jQuery 从来不支持 Quirks 模式，我们 不要在 Quirks 中执行任何测试。这可能会影响像 $("window").height() 和 jQuery 1.8 Quirks 模式的结果 更改以支持一些现代浏览器功能。大多数 我们看到的问题案例来自想要参与的开发人员 标准模式，但之前有无效的文档类型或无关的标记 他们的标签。如有疑问，请使用简单而简短的 .

Answer 3

请查看此博客。他对浏览器中的屏幕测量进行了非常详细的研究

http://tripleodeon.com/2011/12/first-understand-your-screen/