Почему всплывающая подсказка размера элемента и вычисленные размеры стиля отличаются в инструментах разработчика Chrome?

Question

Пока я отлаживал проблему в своем проекте GWT, я заметил, что когда я наведя курсор на элемент, я увидел его размер во всплывающей подсказке и заштрихованную область, указывающую его размер и положение на экране.Однако при выборе этого элемента и просмотре его атрибутов «вычисленного стиля» я замечаю, что ширина одинакова, но высота отличается от всплывающей подсказки (она равна нулю).

Это заставляет меня задуматься: что такоеразмер, который Chrome отображает во всплывающей подсказке?Почему это ненулевое значение, когда вычисляемый стиль равен нулю?

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

Вотизображение о чем я говорю: http://img845.imageshack.us/img845/1766/96984162.png

Answer 1

Всплывающая подсказка отображает эффективный offsetWidth / offsetHeight для проверяемого элемента, в то время как Computed Style отображает ... ну, вычисленные значения стиля для элемента.WebKit ошибочно возвращает «0px» вместо «auto» для элементов «display: inline».Я предполагаю, что это все еще верно для вашего элемента "display: table-cell".

Answer 2

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

Я столкнулся с этой проблемой некоторое время назад, когда случайно оставил print_r () в начале моего кода.