Пограничный коллапс различия в FF и Webkit

Question

У меня есть таблица со следующими правилами:

    <table cellspacing="0" cellpadding="0" style="table-layout:fixed;
width:1000px;border-collapse:collapse;border-spacing:0">

, и ячейки имеют следующий CSS:

td{
padding:4px;
height:22px;
border:1px solid gray;
}

Вычисленный стиль для моих ячеек таблицы выглядит следующим образом:FF:

padding-top 4px
padding-right   4px
padding-bottom  4px
padding-left    4px
border-top-width    0
border-right-width  1px
border-bottom-width 1px
border-left-width   0

, тогда как на webkit это выглядит так:

padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;

По какой-то причине есть разница в следующих двух свойствах:

border-top-width
border-left-width

Это известная проблема?Любые возможные решения проблемы ??

Answer 1

Derrylwc, это не совсем правильно - эффект не тот же. Firefox добавляет границу в 1 пиксель к нижней части ячейки выше (для border-top) и 1px справа от ячейки слева (для border-right) или к таблице, если сверху или слева нет ячейки.

Хотя это может и не быть примечанием для таблиц, отображаемых только при загрузке страницы, для динамически изменяющихся таблиц, таких как скрытие / отображение строки, имеющей границу, это заметно, поскольку она изменяет высоту ячейки выше или ширину ячейки на налево на -1px (из-за способа вычисления высоты и ширины td) и поэтому вызывает заметное изменение размера от оригинала.

Должен существовать стандартный способ их вычисления, и, к сожалению, для динамических таблиц метод firefox действительно не работает. Это делает беспорядочную опцию бесполезной.

Чтобы преодолеть это, удалите коллаж и добавьте интервал: 0.

Answer 2

То, что вы видите, - это различие в том, как Firefox и Chrome относятся к border-collapse. Хотя оба браузера корректно отображают желаемый результат, методология его расчета несколько отличается.

Firefox читает это так:

• <table> сам имеет border-top-width: 1px и border-left-width: 1px
• каждый содержит <td> имеет border-right-width: 1px и border-bottom-width: 1px

Chrome читает каждый <td> как имеющий собственную границу вокруг.

По сути, когда он видит border-collapse, Firefox пересматривает свойства каждой ячейки, чтобы удалить границы - тогда как Chrome сохраняет значения и просто перекрывает каждую границу. Эффект тот же, просто разные значения на уровне <td>. В обоих браузерах граница <td> будет лежать поверх <td>, предшествующего ему (либо выше, либо слева).