$（window）.height（）问题在IE和FF [英] $(window).height() issues in IE and FF

问题描述

我写了一个脚本，在我的页面中创建一个动态大小的 div （#table）。我还有一个菜单（#menu）与 nav 里面，确定最小高度。在Chrome和Safari，一切正常，但在IE / FF不是这么多。在两个我有同样的问题：如果我加载页面全屏，然后我最小化它用最小化按钮，它需要错误 $（window）.height（） 。如果我重新加载它最小化，它的工作确定，我甚至可以调整大小，使得div调整确定。我把一些图像清楚说明我在说什么。

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

b
$ b

• Chrome 21.0.1180.89 m


• Safari 5.1.7


• Internet Explorer 9


• Firefox 14.0.1

这是我的javascript / jQuery代码：

 <！ - 菜单调整大小 - > 
< script type ='text / javascript'> 
 $（function（）{
 $（'＃menu'）。css（{'height'：（（$（window）.height（）） -  350）+'px'}）; 
 $（'＃table'）。css（{'height'：（（$（window）.height（）） -  225）+'px'}）; 
 $（' ）.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 '：（（$（window）.height（）） -  225）+'px'}）; 
 $（'＃table'）。css（{'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表{
 width：100％; 
 font-size：11px; 
 padding：25px 25px 25px 25px; 
 text-align：left; 
} 
 
 #table表格{
 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表输入[type ='checkbox'] {
 margin-top：2px; 
 border-color：＃949494; 
} 
 
 #login_container {display：block; height：260px;} 
  

这里是图片： >

解决方案

我有同样的问题，到我所有的HTML文件。解决方案在这个堆栈溢出问题中指出：

jQuery 1.8.1 版本说明

不要使用Quirks模式！ jQuery从来不支持Quirks模式，我们
不在Quirks中执行任何测试。这可以影响像
$（window）。height（）和jQuery 1.8 Quirks模式结果的值
改变为了支持一些现代的浏览器功能。我们看到的大多数
的问题案例是来自开发人员想要在
标准模式，但在
标签之前有一个无效的doctype或无关的标记。如有疑问，请使用简单和简短。

I wrote a script to make a dynamic sized div (#table) inside my page. I also have a menu (#menu) with a nav inside that establishes the min-height. In Chrome and Safari it all works ok, but in IE/FF not so much. In both I have the same problem: If I load the page full screen and then I minimize it with the minimize button, it takes the wrong $(window).height(). If I reload it minimized, it works ok, I can even resize such that the div adjusts ok. I put some images to be clear about what I'm talking about.

With FF I have another problem. It always has a space in the bottom of the div when the window size is bigger than the menu. Its like the value that I apply in the other browsers doesn't fit for Firefox. This problem is only with the height. The dynamic width works ok.

The versions of my browsers are the following: I think they are the latest ones.

• Chrome 21.0.1180.89 m
• Safari 5.1.7
• Internet Explorer 9
• Firefox 14.0.1

Here is my javascript/jQuery code:

<!-- 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>

Part of page style:

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

And here are the images:

解决方案

I had the same problem with Firefox, and I solved it adding to all my HTML files. The solution was pointed out in this stack overflow question:

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

The jQuery 1.8.1 release notes say

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 .

这篇关于$（window）.height（）问题在IE和FF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！