jquery - insideHeight() 在 IE 9/10 中返回错误的高度

Question

需要一些帮助来理解奇怪的 IE 行为。我有两个 div，一个相邻。其中一个 div 有文本，另一个是空的。我想设置空 div 的高度以使 div 与文本匹配。将空 div 高度设置为带有文本的 div 的 .innerHeight() 在 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的截图

Answer 1

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

HTML 保持不变。

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

我通过将左右 div 的高度设置为 100% 来更改 CSS。这没有任何效果，因为父容器没有设置高度。但是一旦脚本改变了容器的高度， children 就会使用react。

.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 中似乎也能正常工作。