Есть ли какой-нибудь инструмент, который может показать, как вычисляется свойство CSS, если он не наследуется или не устанавливается непосредственно в элементе?

Question

Если у меня есть ячейка таблицы, высота которой составляет X пикселей, могу ли я увидеть, что именно делает это так – ли это высота брата <td> или у него есть ребенок div где-то с высотой X пикселей?

В принципе, у меня есть , и я хочу понять, почему это 172 пикселя, а не, скажем, 150. Высота никогда не устанавливается явно в коде.

Есть ли расширение для браузера где-нибудь, что показывает подобное, и избавляет меня от необходимости щелкать через каждый дочерний/родственный узел, чтобы проверить его?

Редактировать: Я уже знаю, что большинство браузеров имеют встроенные инспекторы DOM. Однако не все атрибуты CSS наследуются или устанавливаются непосредственно на элементе, как я уже сказал в первом абзаце. Я хотел бы знать, есть ли лучший инструмент, показывающий способ вычисления атрибута.

Answer 1

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

• Firefox
  • Используйте Firebug, Хит F12, убедитесь, что вы находитесь на вкладке инспектора и нажмите на стрелку с поле слева от вкладки инспектора и выберите элемент , Стили будут отображаться справа и разбиты на категории, такие как непосредственно применяемые стили, и унаследованные стили от родительского тега.
• Internet Explorer
  • Hit F12, нажмите на иконку курсора и выберите элемент. Он отобразит дерево непосредственно примененных стилей и унаследованных.
• Google Chrome
  • Hit F12, отображение стилей будет похож на Firebug.

Обратите внимание, что в Firebug, когда у вас включен инструмент выбора, он будет очертить элемент/тег под курсором, показывая вам на странице, как большой элемент (как если бы вы применили border: 2px solid blue стиль, а также выделить соответствующий элемент/тег в инспекторе HTML, чтобы вы точно знали, с каким элементом/тегом вы имеете дело. Хотя это не будет волшебно сказать: «О, эй, этот конкретный тег и стиль тот, который дает вам проблемы ", поможет вам получить более четкое представление о проблеме.

Answer 2

• Для firefox есть FIREBUG.
• Хром имеет этот встроенный (F12).
• Существует также встроенный отладчик в IE, но только с версии 8 (также F12).

Если вы wan't изучить конкретный элемент, правой кнопкой мыши на нем и выберите examine element (текст может отличаться в английском - я использую другую языковую версию). Затем в правом столбце вы увидите CSS, и там должна быть вкладка для «вычисленных стилей» или что-то вроде этого (в зависимости от браузера). Вы также можете убедиться, что выбрали нужный элемент - вы можете проверить это в левом окне, где отображается HTML. Выбранный элемент должен быть выделен.