Почему HTML5 игнорирует высоту строки меньше размера шрифта? - PullRequest
Новая
       1

Почему HTML5 игнорирует высоту строки меньше размера шрифта?

22 голосов
/ 16 февраля 2011


Я переключаю некоторые страницы на HTML5, который содержит заголовки, которые должны быть установлены с очень маленькой высотой строки. Теперь, так как <!DOCTYPE html> любая высота строки ниже размера шрифта игнорируется. Я могу разложить их все, что хочу, но нет никаких шансов сблизить их. Кто-нибудь знает, почему это и излечимо ли это?
Спасибо, томас

Редактировать: Найдено. Моя старая разметка была <a style="line-height:12px;" href="#">something</a>, которая работала в XHTML 1.0 переходной, но не в HTML5.
Я изменил его на <div style="line-height:12px;"><a href="#">something</a>, который работает!
Спасибо!

Ответы [ 4 ]

46 голосов
/ 22 марта 2012

Ваш тег <a> является встроенным элементом, и он появляется в HTML5-элементах, которые зависят от высоты строки его родительского элемента 'block' (или вплоть до стиля <body>, если это непосредственный родитель).

Пример: 

body { line-height:20px; } 
a { line-height:12px; }

и эта разметка: 

<body>
    <a href="#">test</a>
</body>

Тег <a> будет иметь высоту строки 20px, а не 12px.

Так что ваш «inline» <a style="line-height:12px;" href="#">something</a> не работал, но работал, когда вы обернули его в элемент <div> уровня 'block', потому что элементы block могут определять высоту строки.

Лучший способ, чем раздутая разметка, заключив встроенный элемент в элемент блока, просто используйте CSS, чтобы тег отображал 'inline-block'.

<a style="display:inline-block; line-height:12px;" href="#">something</a>

Еще лучше, дайте вашему <a> класс (замените «xx» ниже на что-то семантическое): 

<a class="xx" href="#">something</a>

Затем в вашем CSS-файле установите для этого класса значение 'inline-block': 

.xx { display:inline-block; line-height:12px; }

Надеюсь, это поможет.

2 голосов
/ 16 февраля 2011

У вас есть код?У вас есть посторонние отступы или поля?

Это работает для меня в Firefox, Chrome и IE8 

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
0 голосов
/ 07 сентября 2017

В моем понимании, каждый элемент уровня блока имеет символ ширины 0, называемый "распорка". Он будет участвовать в расчете высоты линейного бокса. Когда высота строки у детей меньше родительской, похоже, что высота строки у детей игнорируется, потому что высота строки у родителей будет удерживать поле строки, когда высота строки у детей меньше.

0 голосов
/ 16 февраля 2011

Вам необходимо использовать em , так как большой размер текста в IE8 и IE7 не будет иметь одинаковую высоту строки ... например. используя размер шрифта 30px:

В этом примере показано, что при размере текста 30 пикселей высота строки в IE7 и IE8 не соответствует Chrome и FF. 

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

В этом примере показано, что при использовании em во всех браузерах отображается одинаковая высота строки .em - старая система, хотя мы должны использовать ее до тех пор, пока IE8 и ниже не исчезнут. Это хорошая практика. 

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...