Есть ли простой способ определить, какие факторы влияют на размер элемента HTML?

Question

Например, у меня есть ситуация, когда у меня есть что-то вроде этого (надуманного) примера:

<div id="outer" style="margin: auto>
    <div id="inner1" style="float: left">content</div>
    <div id="inner2" style="float: left">content</div>
    <div id="inner3" style="float: left">content</div>
    <br style="clear: both"/>
</div>

, где для любых элементов не задана ширина, и я хочу, чтобы #inner1, #inner2 и #inner3 появлялись рядом друг с другом по горизонтали внутри #outer, но происходит #inner1 #inner2 появляются рядом друг с другом, а затем #inner3 переносится на следующую строку.

На реальной странице, где это происходит, происходит гораздо больше, но я очень тщательно проверил все элементы с помощью Firebug и не понимаю, почему элемент #inner3 не появляется в той же строке, что и #inner1 и #inner2, в результате чего #outer становится шире.

Итак, мой вопрос: есть ли способ определить , почему браузер определяет размер #outer, или почему он выбирает обертку #inner3, хотя места достаточно? поставить его на предыдущую «строчку»? Разрабатывая конкретные решения этой проблемы, какие советы или приемы вы используете для хардкорных ребят из HTML / CSS / Web UI для бедного бэкэнд-разработчика, который работает над интерфейсом?

Answer 1

Было бы неплохо иметь инструмент, который мог бы точно сказать вам, в чем заключаются все ваши проблемы с макетом, но в этом случае браузер отображал страницу именно так, как она должна быть - общая ширина поплавков превышала ширину содержащий блок, так что последний переходит на новую строку (это немного отличается от проблемы с раскрывающимся блоком / плавающей точкой IE6, которая обычно вызывается содержимым внутри float, а не самими float). Так что в этом случае с вашей страницей все было в порядке.

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

Кроме того, более глубокое понимание того, как CSS-макет также очень помогает. Это может быть довольно сложно.

Например, обычно рекомендуется назначать явные значения ширины плавающим элементам - спецификация W3C CSS2 гласит, что числа с плавающей точкой должны иметь явную ширину и не содержит инструкций о том, что делать без нее. Я думаю, что большинство современных браузеров используют метод «сжать, чтобы соответствовать», и ограничатся шириной содержимого. Однако это не гарантируется в старых браузерах, и в чем-то вроде 3-колоночной разметки вы будете зависеть от ширины содержимого внутри плавающих элементов.

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

Answer 2

Попробуйте подключаемый модуль для веб-разработчиков для Firefox. В частности, параметры Информация -> Размер блока отображения и Структура -> Элементы уровня блока структуры Это позволит увидеть границы ваших элементов и их размер так, как их видит Firefox.

Answer 3

Таким образом, я нашел ответ в моем конкретном случае - в DOM был гораздо больший div, в котором были заданы определенные левые / правые поля, которые сжимали его и все в нем.

Но суть вопроса в том, как можно легко отладить проблему такого рода? Например, в этом случае было бы идеально, если бы в Firebug при наведении указателя мыши на размер элемента на панели макета отображалась подсказка с надписью «ширина ограничена внешним элементом X; высота ограничена стилем Z элемента» Q "или" ширина определяется внутренними элементами A, B и C ".

Хотелось бы, чтобы у меня было время написать что-то подобное, хотя я подозреваю, что было бы сложно (если не невозможно) получить эту информацию из движка рендеринга Firefox.

Answer 4

На вкладке CSS Firebug вы можете увидеть, какие правила стиля применяются к выбранным элементам в порядке каскадирования. Это может или не может помочь вам в вашей проблеме.

Я полагаю, что что-то в содержимом # inner3 заставляет его оборачиваться ниже первой строки, а #outer просто масштабируется для размещения меньшего необходимого пространства.