Выяснение, почему текст на веб-странице больше, чем предполагалось при использовании Firebug

Question

У меня есть текст, отображаемый шрифтом большего размера, чем предполагалось. Я использовал Firebug, и он показывает, что текст 12px, как определено в CSS элемента. Однако и веб-разработчик, и CSSViewer сообщают, что текст имеет размер 16px, что и отображается в настоящее время.

Со всеми этими инструментами я не могу быстро определить источник размера шрифта 16px. Это должно быть 12px.

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

Answer 1

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

Answer 2

Начиная с версии 1.10 Боковая панель Firebug *1003* Computed * позволяет вычислять каждое вычисленное значение , чтобы увидеть его каскадную иерархию, что упрощает доступ к знать, как это было вычислено.

Пример:

font-size property">

В этом примере вы можете видеть, что размер шрифта в основном определяется в правиле с помощью селектора .wmd-preview.

Answer 3

Если использование Firebug не помогает, я бы поискал в вашем CSS «16px», временно удалил этот атрибут и посмотрел, поможет ли это. CSS не всегда ведет себя должным образом, особенно в разных браузерах. Например, неправильное форматирование кода может вызвать очень странное поведение.

Также проверьте ваши XHTML / HTML и CSS. Я нашел это, чтобы сразу решить многие проблемы.