Почему ширина Javascript для ячейки таблицы слишком мала?

Когда вы применяете border-collapse: collapse; к таблице, чтобы "объединить" границы своих ячеек, они начинают вызывать проблемы при определении ширины ячеек таблицы в Javascript. Например, посмотрите эту страницу:
http://game-point.net/misc/browserTests/scratchpads/jsTableWidth/
Есть две таблицы, одна с обрушенными границами и одна без. Если вы нажмете на строку в строке без сложенных границ, функции jQuery innerWidth и outerWidth сообщают о том, что я ожидаю увидеть (ширина содержимого и содержание плюс ширина границы соответственно, нет отступов).

Однако, если вы нажмете на строку в таблице со сложенными границами, вы получите непоследовательное поведение браузера, особенно в свойстве clientWidth. В Firefox clientWidth совпадает с width(). В IE и Chrome он на 1 пиксель выше, а в Opera - то же, что и width(), но Opera width() слишком мала. Фактически, width() - один пиксель слишком мал во всех браузерах, которые я тестировал, кроме Firefox. Поэтому, если вы сделаете скриншот, а контент на самом деле 80px, width() - 79px (jQuery получает его из вычисленного значения CSS). Почему это?

Я хочу получить ширину фактического содержимого. Кажется, я не использую width(), потому что только Firefox получает это право со сложенными границами. Я не могу использовать outerWidth(), потому что это включает границы (или, может быть, только одну границу, видя, что она на 1px больше, чем фактическая ширина содержимого). Я не могу использовать clientWidth, потому что его значение несовместимо между браузерами. Что мне делать и почему width() 1px слишком короткий в большинстве браузеров, когда границы сбрасываются?

Ответ 1

Я думаю, что проблема в каждом браузере, но Opera - это то, что jQuery делает со своей функцией width(); он имеет пользовательские привязки для ширины и высоты, и он не всегда возвращает истинную вычисленную ширину. Когда я использую window.getComputedStyle, чтобы получить ширину этих ячеек таблицы, он действительно дает мне соответствующую визуализированную ширину. Я собираюсь сообщать о выходе Opera window.getComputedStyle в качестве ошибки, потому что он, похоже, не дает вам надлежащей ширины отображения даже при обходе jQuery.

Ответ 2

В модели с падающей границей ячейки не просто "объединены", они разделяются соседними ячейками.

Скажем, у вас есть разметка вроде этого:

<table style="border-collapse: collapse">
  <tr>
    <td style="border: 1px solid black; width: 100px">
    <td style="border: 1px solid black; width: 100px">
  </tr>
</table>

В свернутой модели границы ширина этой таблицы равна 102px. Там 0.5px границы, что фактически вне таблицы, затем 0.5px границы, затем 100px ячейки, затем 1px границы, затем 100px ячейки, затем 0.5px границы, затем 0.5px границы вне таблицы. Смотрите изображение на http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

Итак, что такое возврат UA для разных ширин первой ячейки? Должно быть 100px? 101px? 102px? Что-то другое? Просто возврат ширины содержимого плюс ширина границы вернет 102px, но фактическое пространство, занимаемое ячейкой, составляет всего 101px...

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

И нет никакой реальной спецификации для clientWidth, а тем более jQuery width() и тому подобного, конечно. Это объясняет, почему результаты, которые вы видите, повсюду.

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