爲塊設置一個固定的高度會打破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/

注

• 我測試上IE8與兼容性模式IE7
• 固定寬度設置爲容器，並設置爲width: 100%行是不是一個選項。

Answer 1

好找一個夥伴國家的人:)

剛測試過「line-height：20px;」而不是「height：20px;」和只是正常工作於：

1. IE 7
2. IE 8
3. FF3 +
4. 的Safari
5. 鉻
6. 歌劇用於該測試

DOC-類型原「嚴格」。

Answer 2

這可能不是你要找的（表，啊），但在這裏不用答案...

<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> 

我花了一個半小時的努力的各種組合hasLayout和position: relative和inline/inline-block等，但一個表是所有我能得到的工作恐怕:-(