如何實現正確的CSS行高度一致性

我對font-size和line-height基本的CSS規則很簡單：如何實現正確的CSS行高度一致性

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
}

當我創建一個包含<em>或<strong>一個段落（甚至一些<code>它使用與<body>不同的font-size），我注意到這些元素將行高增加了一個或兩個像素。

這使我相信，大多數瀏覽器採取最大內聯元素顯示line-height。是對的嗎？

我的目標是使line-height一致，無論哪些元素是內聯的。

我發現使line-height一致的唯一方法是定義：

em, strong, code, etc { 
    line-height: 100%; 
}

這是去了解這個正確的方式？還是我太過完美主義者了？

編輯1：

這也似乎工作：

em, strong, code, etc { 
    line-height: 1; 
}

編輯2：

玩這個了幾天之後，它不會出現有一個可靠的解決方案來保持一致的line-height。如果任何人有任何想法，我一定會喜歡聽到他們。

編輯3：

對於我自己的未來參考，並從我自己的研究，這些標籤應與line-height: 1只要被視爲他們直列以及其他標準的正文顯示：

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q, 
samp, small, strong, sub, sup, tt, var

這些元素是有問題的：

a, bdo, img, span

來源

2009-10-12 Jeff

的spec確認你在想什麼，是瀏覽器採取的行高度計算的最大字體。這意味着您唯一的選擇（以及規格中提到的一個選項）是爲您關心的所有行上的所有內聯框設置行高。您可能不喜歡選擇body *並設置字體大小的結果。所以加一些div周圍，你想看看均勻任何文本塊的同一個班級，和你去那裏：

div.uniformlines * { 
    line-height: 100%; 
    font-size: 16px; 
}

來源

2009-10-13 17:26:03 WillfulWizard

優秀信息！那麼'p * {line-height：0; }'，或者更好，也許'p a，p代碼，p大{line-height：0; }'？現在我們正在某個地方。 ';）' – Jeff 2009-10-13 17:40:37

後續到我最後的評論。上面的代碼要小心。例如，如果您有'

foo

'，則行高將計算爲零，這可能不是您想要的。 – Jeff 2009-10-13 18:21:18

我認爲這是一個非常ñ吃點想法。

但是，不要忘記，如果粗體/斜體文本太大，那麼只有在需要時纔會使所有線條變得很高，從而損害可讀性。如果您的示例尚未處理，您可能還需要處理上標和下標。

來源

2009-10-12 15:58:17 DisgruntledGoat

Ooooo是啊，現在在sub和sup上工作，但是準備放棄。大聲笑 – Jeff 2009-10-12 16:05:11

嗯，剛剛回來，我不認爲我發佈的是正確的。將行高設置爲100％不會保持一致 - 文字較大的行較大，但後續行會恢復正常。將行高設置爲0的示例將所有行保持爲原始高度 - 在這種情況下，您需要確保較大的文本不與其他行重疊。 – DisgruntledGoat 2009-10-12 18:09:23

我沒有看到這種行爲，但我正在使用WebKit。如果你在這個例子中加入一些粗體標籤，問題是否會發生？

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

來源

2009-10-13 10:16:52

是的，它確實（FF 3.0.x）。我現在正在處理這個問題，似乎沒有一個友好的解決方案。 – Jeff 2009-10-13 17:19:11

看來最好的和最靈活的定義body {line-height: 0}然後定義行高爲主要內容的區域與line-height: 1或1.5或其他。這使您可以更加動態和一致地控制其他元素。

例如，線條高度對於圖像或其他希望彼此齊平的網格（如圖庫風格）來說可能確實存在問題。當圖像具有錨定標記時，這通常是這種情況，它會繼承其父級的行高。該規範允許「正常」的值，但這似乎是每個瀏覽器的不同標準。 1或100％也是選項，但「0」似乎基本上使所有瀏覽器強制執行相同的標準，就像一個好的CSS重置。當然，所有的文本都被擠壓成一行「0」，這就是爲什麼在內容區域設置行高是必要的。

Here's a codepen I put together to illustrate the point

來源

2014-07-18 18:25:54

此線程已歲事情都有可能在此期間已經改變，但以下（這是我重新找回了上http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/）爲我工作：

* { 
    vertical-align: bottom; }

這是因爲vertical-align相當驚人因爲這似乎與line-height無關;然後再次，這是CSS，所以你永遠不知道。上面引用的網站實際上暗示了

sub { 
    height: 0; 
    line-height: 1; 
    vertical-align: baseline; 
    _vertical-align: bottom; 
    position: relative; }

這對我來說看起來像是黑客。

來源

2015-01-21 05:12:07 flow

如何實現正確的CSS行高度一致性

回答

相關問題