CSS, как заставить тег H2 выглядеть так же, как тег H3 (получилось сложно!)

Question

Я ищу совет ... для решения моей проблемы.

Я пишу новую тему wp для моего блога.

Проблема, с которой я столкнулся, заключается в следующем: у меня есть ссылки для публикации на домашней странице и на странице категории (ссылки, которые ведут к публикации). На главной странице у этих ссылок есть тег h3, причина текучести (заголовок h1 сайта, заголовок h2 категории, заголовок h3 post). Теперь на странице категории у меня другой поток (название категории h1, пост h2). Проблема в том, что дизайн должен выглядеть одинаково ... поэтому моя задача - сделать так, чтобы h2 на странице категории выглядел так же, как h3 на домашней странице.

Оказывается, это не так просто. Прежде всего я должен был использовать меньший шрифт. Что странно для меня, я должен был установить h2 0,8em и h3 1em. Это правильный способ решения этой проблемы? И тогда, хотя у меня было поле 0 в обоих заголовках, возникло какое-то странное расстояние ...

Итак, это окончательный результат, который заставляет h2 выглядеть как h3 (пришлось использовать меньший шрифт, высоту строки на h2, а также margin-bottom больше на 3px).

У меня вопрос, если это нормально, способ достижения этого результата? или что-то не так с моим общим файлом сброса ??

Включая изображение для более четкого обзора вещей:

http://imageshack.us/photo/my-images/33/unled1hg.jpg/

И вы можете увидеть две страницы вживую: http://artvard.com/category.html http://artvard.com/main.html

Answer 1

Проблема в том, что ems наследуются от родительского элемента. Думайте о них как о процентах, если это поможет.

Поэтому, если вы установите h2 на 1em, то у вас будет область содержимого, такая как <div id="content">, которую вы стилизуете на 0,8em, все внутри #content div будет отображаться на 0,8em. Если у вас есть h2 элемент внутри #content, он будет иметь размер 1em, который вы ранее определили как 0.8em, то есть он будет меньше.

Поскольку большинство современных браузеров позволяют пользователю увеличивать размер страницы, аргумент для использования ems вместо px слабее. Поэтому я бы порекомендовал либо перейти на px, либо внимательно изучить ваше наследство.

Answer 2

Если указать размер шрифта в em, тогда он будет основан на размере шрифта родительского элемента, поэтому, если у тегов разные родительские элементы, один и тот же параметр может привести к различным фактическим размерам.

Если есть стиль, специально установленный для h3, вы можете просто повторить его для h2 или настроить его в соответствии с унаследованными значениями.

Если стиль для h3 основан на браузере по умолчанию, тогда вы можете 'H2 выглядит так же.Вы можете создать стиль для h2, который будет выглядеть по умолчанию для h3 в одном браузере, но в другом браузере по умолчанию для h3 будет выглядеть по-другому.

Answer 3

Лучшее решение - использовать CSS reset на H2 и H3 и начать стилизацию с нуля.В противном случае всегда будут свойства, такие как высота шрифта и т. Д., Которые могут отличаться в разных браузерах.