innerHeight（）在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。这没有任何效果，因为父容器没有设置高度。但是一旦脚本改变容器高度，孩子们就会做出反应。

.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中运行良好。