Установка фиксированной высоты для блока нарушает ширину 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. Chrome
6. Opera

Тип документа, использованный для этого теста, был "строгим".

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 и т. Д., Но я боялся, что стол - это все, что я мог получить, боюсь : - (