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

Question

我编写了一个脚本来在我的页面内创建一个动态大小的 div (#table)。我还有一个菜单(#menu)，里面有一个nav，用于确定最小高度。在 Chrome 和 Safari 中一切正常，但在 IE/FF 中则不然。在这两个中我都有同样的问题:如果我全屏加载页面，然后使用最小化按钮将其最小化，则会采用错误的 $(window).height() 。如果我重新加载它最小化，它工作正常，我什至可以调整大小，以便 div 调整正常。我放了一些图片来清楚地说明我在说什么。

对于 FF，我还有另一个问题。当窗口大小大于菜单时，div 底部始终有一个空间。就像我在其他浏览器中应用的值不适合 Firefox 一样。 这个问题仅与高度有关。动态宽度工作正常。

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

• Chrome 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

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

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

jQuery 1.8.1 发行说明说

Don’t use Quirks mode! jQuery has never supported Quirks mode and we do not perform any testing in Quirks. This can affect values like $("window").height(), and the jQuery 1.8 Quirks mode results did change in order to support some modern browser features. The majority of problem cases we’ve seen are from developers that wanted to be in Standards mode but had an invalid doctype or extraneous markup before their tag. When in doubt, use the simple and short .