Я разбил это на довольно простой пример.
Для меня это выглядит иначе в 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>
Там, по-видимому, ошибка в способе заполнения Firefox и Chrome в ячейках таблицы в HTML5: http://code.google.com/p/chromium/issues/detail?id=50633
Когда вы пытаетесь разметки и CSS с добавлением 0, они одинаковы. Когда вы переключаете DOCTYPE не на HTML5, они одинаковы.
В HTML5 некоторые браузеры добавляют 2px к ячейкам таблицы с изображениями, если высота строки по умолчанию. Он помечен как ошибка, не ожидайте, что он всегда будет таким.
table { line-height: 0; }
Собственно, это поведение вызвано различными значениями по умолчанию 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 дополнительным контейнером для заполнения в качестве простого и пуленепробиваемого решения.
Надеюсь, это поможет!
td { padding: 10px 0 0 0; }
Это говорит: padding-top: 10px;, замените 10px на 0 и, надеюсь, он будет таким же. Это означает, что Firefox и IE9 не учитывают заполнение. (Я думаю)
Это должно быть написано так: padding: 0 10px 0 10px; иначе браузеры не будут полностью поддерживать измерение.
Я нашел 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; и может работать для других браузеров специально для отладки.