Макет таблицы: исправлены различия в рендеринге в Safari

Question

В основном проблема, с которой я столкнулся, заключается в том, что в Safari / Chrome изменяется ширина моих столбцов, хотя я указал а) ширину таблицы, б) макет таблицы: фиксированный, и в) конкретную ширину таблицы. первая строка, которая при добавлении со значениями отступа и границы добавляется к ширине указанной таблицы. В IE7 и Firefox 3 таблица отображается одинаково. Но в Safari / Chrome он решает увеличить второй столбец, занимая место у других столбцов.

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

Answer 1

В глючных веб-наборах table-layout: fixed также дает ячейки вашей таблицы box-sizing: border-box.В качестве альтернативы определению браузера явно указывается box-sizing: border-box, чтобы обеспечить согласованное поведение в разных браузерах, а затем соответствующим образом настроить ширину и высоту (ширину и высоту необходимо увеличить, чтобы включить отступы и границы).

#my-table td {
  box-sizing: border-box;
} 

Answer 2

Мне удалось обойти эту проблему, удалив отступы из <th> с фиксированной шириной. Затем вы можете безопасно добавить отступ к <td>

Answer 3

Посмотрев вокруг, я думаю, что это вызвано следующими ошибками webkit: 13339 и 18565 . В основном проблема в том, как он использует значения границ и отступов при расчете окончательной ширины столбцов.

В конечном итоге я сделал некоторый анализ в браузере и установил несколько других значений CSS, основанных на этом для браузеров webkit, чтобы окончательный рендеринг был таким же, как FF и IE.

Answer 4

У таблицы Kendo есть таблица: fixed-width. Все колонки исчезли, но только в Safari. После проверки все элементы td имеют вычисленную ширину стиля -3px. Если я уберу table: fixed-width, это нормально. Если я укажу ширину в пикселях (но не в процентах), это нормально. Если я отключаю каждый стиль, примененный к каждому источнику CSS, который я могу найти (на вкладке стиля консоли), проблема не устраняется, и ничего не задает width -3px.

Так что я должен либо установить ширину всех столбцов в пикселях, либо не использовать table: fixed-width.

Answer 5

Вы пытались загрузить Reset CSS? http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/