HTML5 Заполнение ячеек таблицы - отличается в браузерах - PullRequest
Новая
       26

HTML5 Заполнение ячеек таблицы - отличается в браузерах

18 голосов
/ 09 ноября 2010

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

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

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

Я пытался использовать сброс Эрика 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>

Ответы [ 6 ]

15 голосов
/ 09 ноября 2010

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

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

9 голосов
/ 04 мая 2012

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

table { line-height: 0; }
3 голосов
/ 23 октября 2012

На самом деле, это поведение вызвано различными значениями по умолчанию 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 дополнительным контейнером заполнения как простой и пуленепробиваемый обходной путь.

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

2 голосов
/ 09 ноября 2010 
td { padding: 10px 0 0 0; }

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

1 голос
/ 24 октября 2012

Я обнаружил, что специфичный для браузера 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;и может работать для других браузеров для отладки специально.

1 голос
/ 28 сентября 2012

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

...