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

2023年9月2日 187次阅读

我写了一个脚本,在我的页面中创建一个动态大小的div(#table).我还有一个菜单(#menu),里面有一个导航,用于确定最小高度.在Chrome和Safari中,一切正常,但在IE / FF中并没有那么多.在两者中我都有同样的问题：如果我加载页面全屏然后我用最小化按钮最小化它,它需要错误的$(窗口).height().如果我将它重新加载最小化,它可以正常工作,我甚至可以调整大小以使div调整好.我把一些图像清楚地说明了我在说什么.

有了FF我还有另外一个问题.当窗口大小大于菜单时,它总是在div的底部有一个空格.它就像我在其他浏览器中应用的值不适合Firefox.
这个问题只与身高有关.动态宽度工作正常.

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

> Chrome 21.0.1180.89米
> Safari 5.1.7
> Internet Explorer 9
> Firefox 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;}

以下是图片：

最佳答案 我遇到了与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 .

点赞