将固定高度设置为块可以打破100％的宽度

Question

问题是，当我尝试将height: 20px设置为所有行时，这会破坏块元素中的自然width: 100%。此错误仅发生在IE7上（在FF，Chrome和IE8上测试）。

HTML

<div id="container">
   This must be adjusted to content
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
    <div class="row">row #</div>
</div>

CSS

#container {
    border: 1px solid black;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
}
.row {
    border: 1px solid blue;
    margin-top: 2px;
    height: 20px;
}

演示

http://jsfiddle.net/97fax/3/

备注

• 我正在使用IE7的兼容模式测试IE8
• 为行设置固定宽度并为行设置width: 100%不是一种选择。

Answer 1

这可能不是你要找的答案（一张桌子，呃），但是这里......

<div id="container">
    <table><tbody><tr><td>
        This must be adjusted to content
        <div class="row">row 1</div>
        <div class="row">row 2</div>
        <div class="row">row 3</div>
        <div class="row">row #</div>
    </td></tr></tbody></table>
</div>

我花了1/2个小时尝试了hasLayout和position: relative以及inline / inline-block等的各种组合，但是我只能找到一张桌子。我害怕： - （

Answer 2

很高兴找到一个乡下人：）

刚刚测试“line-height：20px;”而不是“height：20px;”并且工作正常：

1. IE 7
2. IE 8
3. FF3 +
4. Safari浏览器
5. 铬
6. 戏

用于此测试的Doc-Type是“严格的”。