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

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

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

Ответ 1

Твой тег <a> является встроенным элементом, и он отображается в встроенных элементах HTML5, отложенных к его родительскому "блоку" element line-height (или вплоть до стиля <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> не работал, но делался, когда вы завернули его в элемент "block" уровня <div>, потому что элементы блока могут определять высоту строки.

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

<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

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

Это работает для меня в 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>

Ответ 3

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

В этом примере показано, что с размером текста 30px высота строки в 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. Все браузеры отображают одну и ту же строку height.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>

Ответ 4

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