2

需要一些帮助来理解奇怪的 IE 行为。我有两个div，一个挨着一个。一个 div 有文本，另一个是空的。我想设置空 div 的高度以将 div 与文本匹配。在 IE9/10 中将空 div 高度设置为 .innerHeight() 带有文本的 div 不起作用（新高度比应有的大 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()
});

这是小提琴，以及来自 IE10 的屏幕截图

截图（IE10）：

4

1 回答 1

0

如果不设置正确 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 中也能正常工作。

于 2013-10-29T12:43:22.743 回答