Различное поведение padding-bottom в строке таблицы между IE и FF - PullRequest
Новая
       6

Различное поведение padding-bottom в строке таблицы между IE и FF

0 голосов
/ 05 марта 2009

Пожалуйста, прочитайте следующий код в качестве примера (обратите внимание на "padding-bottom" 2-й строки таблицы): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head><title>test</title></head>
<body>
<table style="height:300px;width:200px;background:#660000; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;padding-bottom:20px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>

<table style="height:300px;width:200px;background:#006600; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
</body>
</html>

Я ожидаю, что высота двух таблиц должна быть одинаковой как в IE, так и в FF.

Однако FF отображает его, как и ожидалось, но в IE первая таблица на 20px выше, чем вторая таблица. Что я должен сделать, чтобы он выглядел как FF?

Мне также любопытно, в чем разница.

1 Ответ

3 голосов
/ 05 марта 2009

IE и Firefox имеют разные правила работы блочной модели.

Лучший способ думать об этом - IE берет заданную высоту этой ячейки, а затем добавляет к ней отступы. В результате высота ячейки составляет 200 пикселей.

Принимая во внимание, что Firefox берет высоту содержимого ячейки, затем применяет к ней отступы. Поскольку высота содержимого + отступ не превышают установленную высоту ячейки, ячейка не расширяется.

Вы можете попробовать поиграть с парой доктайпов, чтобы увидеть, сможете ли вы заставить их совпадать, но я не думаю, что IE 7 и FF3 подходят для этой ситуации независимо от DOCTYPE. Кроме того, обратите внимание на возможное использование таблицы стилей сброса для сопоставления полей по умолчанию, размеров шрифтов и т. Д.

Я прошел ваш тест и сделал следующее, чтобы он выглядел одинаково в обоих браузерах: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style>
    * {margin:0px; padding:0px;font-family: arial;font-size:14px;}
    span { border: solid 1px black; margin-top:4px;display:block;}
    .first { border:solid 1px blue; }
    .second {border:solid 1px orange; }
    .third {border:solid 1px yellow;}
    .paddit {padding-bottom:10px;height:180px;}

</style>
</head>
<body>
<table style="width:200px;background:#660000; float:left">
    <tr valign="top">
        <td class="first" style="height:20px;"><span>first row</span></td>
    </tr>
    <tr valign="top">
        <td class="second paddit"><span>second row. This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.</span></td>
    </tr>
    <tr valign="top">
        <td class="third" style="height:180px;"><span>third row</span></td>
    </tr>
</table>
<table style="width:200px;background:#006600; float:left">
    <tr valign="top">
        <td class="first" style="height:20px;"><span>first row</span></td>
    </tr>
    <tr valign="top">
        <td class="second" style="height:180px;"><span>second row</span></td>
    </tr>
    <tr valign="top">
        <td class="third" style="height:180px;"><span>third row</span></td>
    </tr>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...