Абсолютно позиционированный заголовок таблицы (th) - какой браузер ошибочен?

Эта простая таблица с одним абсолютно позиционируемым столбцом отличается по-разному в Firefox (и IE), чем в Chrome (и других браузерах на основе Webkit):

enter image description here

http://jsfiddle.net/WZ6x8/

<div>
    <table>
        <tr>
            <th class="absolute">&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </table>
</div>

* {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    table-layout:fixed;
}
th {
    border: 1px solid black;
    width: 100px;
}
.absolute {
    left: 0;
    position: absolute;
}
div {
    margin-left: 100px;
}

Почему существует разница? Какой браузер ошибочен (согласно стандарту)? Как это можно зафиксировать для работы во всех браузерах, не удаляя строку border-collapse: collapse?

Изменить: как отмечено @urzeit, "Если вы укажете top: 0;, то вывод в firefox будет таким же, как и в chrome". Однако есть две проблемы: во-первых, с несколькими строками, top: 0; сворачивает их все в один; во-вторых, правый край абсолютно позиционированного столбца слишком сильно удаляет один пиксель. Вы можете увидеть обе проблемы в http://jsfiddle.net/WZ6x8/3.

+4
источник поделиться
4 ответа

Это вызвано проблемами округления, которые часто несовместимы между браузерами и, вероятно, являются теми же самыми, что и такие вещи, как фоновые смещения, процентные вычисления и т.д.

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

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

и

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

Поскольку ширина границы составляет 1 пиксель, что является нечетным числом, проблемы округления возникают при попытке уменьшить это значение вдвое. Поэтому вопрос о том, какой браузер ошибочен - или если какой-либо из них - является спорным.

К сожалению, поскольку это проблема округления, это невозможно обойти это с использованием чистого CSS, если только с помощью немыслимо сложного хакера, и очень трудно сделать это с помощью script, поскольку браузеры, как правило, несовместимы при представлении десятичных/дробных (в частности, Firefox, IE и Chrome все сообщают о совершенно разных значениях для offsetTop вашей таблицы-ячейки и ее следующей сестры).

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


Здесь nitty gritty, если вас интересует, почему проблема в конечном итоге заключается в том, как определяется модель сжимающейся границы.

Раздел 9.7 утверждает, что если элемент абсолютно позиционирован, то его display устанавливается в block, даже если он будет иначе be table-cell. Во всех браузерах вычисленный display для этого th на самом деле block, поэтому проблем нет.

Как вы правильно указали, содержащий блок вашей ячейки таблицы является исходным содержащим блоком. Это удаляет его из обычного содержащего блока, который в противном случае был бы таблицей. Раздел 10.6.4 добавляет, что если ваша ячейка не имеет заданных высот, верхних или нижних смещений, т.е. все они auto, то он должен оставаться в своем статическом вертикальном положении и измеряться соответствующим образом. (Аналогично, горизонтальное положение учитывается в раздел 10.3.7, однако, поскольку вы дали ему left: 0 и width: 100px, это сдвигается на левый край, а его ширина соответствует указанным, исключая границы.)

Но какова эта статическая вертикальная позиция? Поскольку он обычно был display: table-cell, если он не был абсолютно позиционирован, статическое положение и соответствующие ему измерения определяются его положением в таблице.

В приведенной ниже таблице представлены следующие подразделы раздел 17:

Раздел 17 содержит подробные описания того, как следует выкладывать таблицы, подписи, таблицы-строки и таблицы-ячейки. Многие из них основаны на HTML, и некоторые разделы остаются неопределенными и/или undefined по разным причинам. Фиксированный макет таблицы довольно четко определен, и в этом случае это даже не актуально.

В разделе 17.5 сказано это внизу:

Ребра строк, столбцов, групп строк и групп столбцов в модели collapsing border совпадают с гипотетическими линиями сетки, на которых границы ячеек центрированы. (И, таким образом, в этой модели строки вместе точно покрывают таблицу, не оставляя пробелов, а также для столбцов.)

и

Примечание.Позиционирование и перемещение ячеек таблицы может привести к тому, что они больше не будут ячеями таблицы, в соответствии с правилами в раздел 9.7. Когда используется float, правила для анонимных объектов таблицы могут также создавать анонимный объект ячейки.

Что, конечно, объяснено чуть выше.

Но если абсолютно позиционированная ячейка таблицы больше не является ячейкой, что происходит?

"Отсутствующая ячейка" - это ячейка в сетке строк/столбцов, которая не занята элементом или псевдоэлементом. Пропущенные ячейки отображаются так, как если бы анонимная ячейка ячеек таблицы занимала их положение в сетке.

Итак, в то время как фактическое поле th абсолютно позиционируется, оно оставляет на своем месте анонимную "призракную" ячейку, чтобы таблица была правильно отображена. Эта анонимная таблица-ячейка пуста и не наследует стили из фактической таблицы-ячейки, поэтому она не имеет внутренней ширины.

Однако, поскольку фактическое вертикальное положение таблицы-ячейки является статическим, оно по-прежнему зависит от того, как визуализируется таблица, что приводит нас к разделу 17.6.2 о модели сжимающейся границы.

+11
источник

несколько строк - попробуйте этот css..

<style>
.absolute {
    left: 0;
    margin-top: -1px;
    border-right:0px;
    position: absolute;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.absolute {
    margin-top: 0px;
} 
} 
</style>

Скриншот Chrome и Firefox.

enter image description here

+3
источник

Причина, по которой это происходит, состоит в том, что вы указали запись как абсолютную, то есть стиль браузера Firefox, где он устанавливает свойство "top" css для 1px. Если вы хотите этого избежать, вы можете использовать файл css reset, который удаляет форматирование по умолчанию для конкретного браузера.

Что касается вашей проблемы с установкой top: 0, приводящей к сбиванию ячеек друг с другом, это правильное поведение. Абсолютный рендерит в пространстве ближайшего элемента CSS. Подумайте об этом, как будто элемент больше не находится в обычном месте в DOM. Если две ячейки, указанные как абсолютные, имеют один и тот же самый ближайший позиционированный родительский элемент (в данном случае тело), ​​то они будут отображаться относительно одного и того же места, у каждого из которых есть свойство top: 0, что означает, что они будут перекрываться.

Я не думаю, что это либо неправильно, вы просто сталкиваетесь с (общей) проблемой стилей браузера.

+1
источник

Короче говоря,

Есть две проблемы для меня в этой проблеме

a) Первой проблемой является перекрытие левого <th> с правом <th>

Правильный браузер - это тот, который перекрывает <th>, потому что вы сначала даете внешний div margin-right:100px; свойство <th> с атрибутом aboslute должно соответствовать этой области, но дополнительная граница 1px увеличивает ширину на 2px (левая граница + правая граница). Проверьте правильность перекрытия.

b) Вторая проблема - верхнее поле для левого элемента

Его можно удалить, добавив

th{
 top:0px;
}

Это происходит из-за эффекта браузера на страницу html

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос