Различная интерпретация модели TH Box между браузерами - PullRequest
Новая
       18

Различная интерпретация модели TH Box между браузерами

3 голосов
/ 12 декабря 2011

Я замечаю расхождения между браузерами в том, как интерпретируется ширина тега TH, в частности, независимо от того, включено или нет заполнение в вычисление ширины.

Я создаю многократно используемую библиотеку для быстрой генерации и стилизации таблиц (конечно, для табличных данных). Это означает, что у меня есть полный контроль над кодом, который я генерирую, но мне нужно на самом деле решить проблему, а не искать взлом для конкретного экземпляра.

Простейшее описание проблемы

A TH в IE9 и FF рассчитывается на основе его отступа + ширина (как и ожидалось). Chrome и Safari включают отступы по ширине, что приводит к нежелательным результатам.

Например, если для ячейки задана ширина 16 пикселей + отступы 4 пикселя, IE9 правильно отображает ячейку шириной 20 пикселей. Chrome отображает его как 16 пикселей в ширину.

Вот JS Fiddle, показывающий различия: http://jsfiddle.net/CZnau/

Вы можете видеть, как последняя ячейка имеет разные размеры в разных браузерах.

Примечания

  • Я знаю о размере окна, и хотя по умолчанию не включает вычисление заполнения по ширине ячейки, установка box-sizing: content-box явно не решает проблему.

  • Скрипка показывает таблицу с фиксированным макетом. Я хочу использовать table-layout: fixed для правильной обработки отображения в других сценариях. В частности, моя фактическая реализация использует переполнение текста, управление переносом и макеты переменной ширины. В моем тестировании использование фиксированного макета является единственным надежным способом, чтобы все мои требования хорошо сочетались. Кроме того, таблицы с фиксированной разметкой потенциально отображаются быстрее.

  • Я попытался установить ширину явно для каждого TD, но это не решает проблему (возможно, это конфликтует с таблицей фиксированной разметки?)

Если вам нужна более подробная информация о , почему Мне нужна таблица с фиксированным макетом, попробуйте эту скрипту с table-layout: fixed и без него и отметьте различия. При фиксированной разметке таблица имеет правильный размер до 100% и элегантно обрезает текст, даже с ячейкой переменной ширины.

http://jsfiddle.net/6GPmY/

1 Ответ

1 голос
/ 22 декабря 2011

Firefox пока не поддерживает box-sizing: content-box;, даже в версии Aurora.

До этого вы можете использовать -moz-box-sizing: 

th, td {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
}

jsFiddle Demo

...