爲什麼HTML5忽略小於字體大小的行高？

我將一些頁面切換到HTML5，其中包含需要設置一個非常小的行高的標題。現在自<!DOCTYPE html>以後，字體大小以下的任何行高都被忽略。我可以將它們全部分開，但沒有機會將它們放在一起。任何人都知道這是爲什麼，如果它是可治癒的？
謝謝，托馬斯爲什麼HTML5忽略小於字體大小的行高？

編輯：找到它。我的舊標記是<a style="line-height:12px;" href="#">something</a>，它使用XHTML 1.0過渡，但不使用HTML5。
我把它改爲<div style="line-height:12px;"><a href="#">something</a>一個有效！
謝謝！

來源

2011-02-16 thomas

您確定非HTML5文檔類型不會觸發相同的行爲嗎？ – BoltClock 2011-02-16 09:25:49

我很確定這也取決於瀏覽器，而不是HTML5的一般行爲。 – Nick 2011-02-16 09:27:57

你<a>標記是一個內聯元素，它出現在HTML5內聯元素推遲到父「塊」元素的行高（或高達<body>風格一路如果是這樣的直接父）。

實施例：

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

和這個標記：

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

的<a>標籤將具有20像素不12px的一個行高。

所以你的'inline'<a style="line-height:12px;" href="#">something</a>不起作用，但是當你將它封裝在'塊'級<div>元素中時，因爲塊元素可以決定行高。

通過將您的內聯元素包裝在塊元素中，您可以使用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; }

希望有所幫助。

來源

2012-03-21 23:34:25 ucsarge

你有一些代碼嗎？你有一些額外的填充或邊距？

這對我的作品在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>

來源

2011-02-16 14:37:57 Emily

您需要使用EM大文本大小在IE8和IE7將不共享同一條線路的高度... e.g。使用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>

這個例子顯示使用他們所有瀏覽器中顯示的同一行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>

來源

2011-02-16 16:23:05 Undefined

在我的理解中，每個塊級元素都有一個名爲「strut」的寬度爲0的字符。它將參與線盒高度的計算。當孩子的線高低於父母的線高時，看起來孩子的線高被忽略，因爲當孩子的線高較小時，父母的線高會佔據線框。

來源

2017-09-07 07:16:48 xwchris

爲什麼HTML5忽略小於字體大小的行高？

回答

相關問題