innerHeight() 在 IE 9/10 中返回错误的高度答案

【问题标题】：innerHeight() returns wrong height in IE 9/10innerHeight() 在 IE 9/10 中返回错误的高度
【发布时间】：2013-10-29 20:43:22
【问题描述】：

需要一些帮助来理解奇怪的 IE 行为。我有两个div，一个挨着一个。一个 div 有文本，另一个是空的。我想设置空 div 的高度以将 div 与文本匹配。将空 div 高度设置为 .innerHeight() 带有文本的 div 在 IE9/10 中不起作用（新高度比应有的高 1px，IE8 工作正常）。这个有跨浏览器的解决方案吗？

html:

<div class="container">
    <div class="row" id="left">foo</div>
    <div class="row" id="right"></div>
</div>

css:

.container { width: 200px; }
.row { font-size: 11px; font-weight: bold; color: #666; float: left; width: 100%;  border-bottom: 1px solid #ddd; position: relative;}
#left { background-color:yellow; width: 50%; }
#right { background-color:lightblue; width: 50%; }

js:

var $right = $("div#right"),
    $left = $("div#left")
;

$right.css({
    height: $left.innerHeight()
});

这是the fiddle，以及来自 IE10 的屏幕截图

【问题讨论】：

FWIW，你的小提琴在 IE9 上对我来说很好，我看不出有什么不同，if I dump out their innerHeight and height values，我得到了相同的值。
它在 IE9 中也适用于我。如果我更改为缩放到 110%，它确实会中断。
你确定你没有使用某种标准兼容模式，因为它也适用于我。此外，如果您只支持回到 ie8，那么您可能需要使用显示表格和表格单元格，因为它可以让您拥有相等高度的 div，而无需 js
谁能在IE10上试用一下？我添加了一个屏幕截图，缩放为 100%，所有设置为默认值。

标签： jquery internet-explorer cross-browser

【解决方案1】：

如果不设置右侧 div 的高度，而只是设置容器的高度，那会怎样？

HTML 保持不变。

<div class="container">
    <div class="row" id="left"> foo </div>
    <div class="row" id="right"></div>
</div>

我通过将左右 div 的高度设置为 100% 来更改 CSS。这没有效果，因为父容器没有设置高度。但是一旦脚本改变了容器的高度，孩子们就会做出反应。

.container {
    width: 200px;
}
.row { 
    font-size: 52px; font-weight: bold; color: #666; float: left; width: 100%;  border-bottom: 1px solid black; position: relative;}

#left {
    background-color:yellow;
    width:50%;
    height:100%;
}

#right {
    background-color:lightblue;
    width:50%;
    height:100%;
}

我更改了 JavaScript 以设置容器 div 的高度而不是右侧 div。

var $left = $("div#left"),
    $container = $("div.container");
$container.css("height", $left.innerHeight());

这里是JSFiddle。我在 Firefox 和 IE9 中对其进行了测试。即使我更改缩放比例，它似乎在 IE9 中也能正常工作。

【讨论】：