Почему 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". Он будет участвовать в вычислении высоты строки строки. Когда длина линии для детей меньше родительской, похоже, что длина строки-строки детей игнорируется, потому что родительская строка-высота будет удерживать строку строки, когда высота строк у детей меньше.
