jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – IE和FF中的$(window).height()问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我写了一个脚本,在我的页面中创建一个动态大小的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,.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,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发行说明说

大佬总结

以上是大佬教程为你收集整理的jquery – IE和FF中的$(window).height()问题全部内容,希望文章能够帮你解决jquery – IE和FF中的$(window).height()问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。