Определение того, почему текст на веб-странице больше, чем предполагалось, с помощью Firebug
У меня есть текст, отображаемый с большим размером шрифта, чем предполагалось. Я использовал Firebug, и он показывает, что размер текста составляет 12 пикселей, как определено в CSS элемента. Однако и Web Developer, и CSSViewer сообщают, что размер текста составляет 16 пикселей, что и отображается в данный момент.
Со всеми этими инструментами я не могу быстро определить источник размера шрифта 16 пикселей. Это должно быть 12 пикселей.
Как лучше всего использовать эти (или другие) инструменты, чтобы определить, как рассчитываются 16 пикселей? Хотя я могу выяснить это, просматривая каскадную иерархию, мне было интересно, есть ли способ получить информацию более легко.
Ответы 3
Используя инструментарий веб-разработчика, вы можете увидеть путь к элементу в DOM - просто посмотрите, имеет ли один из верхних элементов другой размер шрифта. Firebug должен показать, от какого элемента унаследован стиль
Если использование Firebug не помогает, я бы поискал в вашем CSS глобально по запросу «16px», временно удалил этот атрибут и посмотрел, поможет ли это. CSS не всегда работает должным образом, особенно в разных браузерах. Например, неправильное форматирование кода может вызвать очень странное поведение.
Также проверьте свои XHTML / HTML и CSS. Я обнаружил, что это сразу решает множество проблем.
Начиная с версии 1.10 Firebug Боковая панель Вычислено позволяет раскрыть каждое вычисленное значение, чтобы увидеть каскадную иерархию для него, что позволяет легко узнать, как он был вычислен.
Пример:
В этом примере вы можете видеть, что размер шрифта в основном определяется в правиле с помощью селектора .wmd-preview.