Вкладка HTML5 Table table - разная в браузерах

Я разбил это на довольно простой пример.

Для меня это выглядит иначе в Chrome 7.0, чем в Firefox 3.6.12. IE 9 beta выглядит как Chrome.

Я хотел бы иметь возможность устанавливать дополнение на TD и визуализировать его с одинаковой высотой во всех браузерах. В настоящее время, с верхним дополнением 10px, ячейки в Chrome выглядят выше, чем в Firefox.

Я пробовал использовать Eric reset css, он не меняет результат Любые идеи, почему это делается по-другому?

Пример того, как он выглядит, - http://yfrog. ком /5zqa7p

И код...

<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>

Ответ 1

Там, по-видимому, ошибка в способе заполнения Firefox и Chrome в ячейках таблицы в HTML5: http://code.google.com/p/chromium/issues/detail?id=50633

Когда вы пытаетесь разметки и CSS с добавлением 0, они одинаковы. Когда вы переключаете DOCTYPE не на HTML5, они одинаковы.

Ответ 2

В HTML5 некоторые браузеры добавляют 2px к ячейкам таблицы с изображениями, если высота строки по умолчанию. Он помечен как ошибка, не ожидайте, что он всегда будет таким.

table { line-height: 0; }

Ответ 3

Собственно, это поведение вызвано различными значениями по умолчанию box-sizing для элементов TD. Взгляните на спецификацию: http://www.w3.org/TR/css3-ui/#box-sizing0

Коробка размера удачно поддерживается во всех основных браузерах, см. http://caniuse.com/#search=box-sizing

Но в браузерах есть проблемы, препятствующие переопределению значения по умолчанию box-sizing, особенно когда вы работаете с TD, поведение почти непредсказуемо в браузерах.

В этот пример JSFiddle наиболее стабильное поведение в браузерах показано border-box и content-box на элементе DIV.

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

Надеюсь, это поможет!

Ответ 4

td { padding: 10px 0 0 0; }

Это говорит: padding-top: 10px;, замените 10px на 0 и, надеюсь, он будет таким же. Это означает, что Firefox и IE9 не учитывают заполнение. (Я думаю)

Ответ 5

Это должно быть написано так: padding: 0 10px 0 10px; иначе браузеры не будут полностью поддерживать измерение.

Ответ 6

Я нашел CSS для браузера (отсюда) для Firefox немного описателен, например:

background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;

Итак, я думаю, для firefox добавление может быть описательным довольно кратким (padding:10px 0 0 0;):

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

Это решение (или может быть решением) только для Firefox; и может работать для других браузеров специально для отладки.