jQuery/CSS：「正常」的行高== ==？px

Question

我打電話$("#foobar").css("line-height")並恢復「正常」。如何將其轉換爲像素量？在CSS規範中定義「正常」還是瀏覽器特定？

Answer 1

正常實際上被稱爲abnormal在several instances，因爲存在相當大的瀏覽器不一致性。

聲明的line-height：正常不僅 從瀏覽器有所不同的瀏覽器，這是我 此前預計，事實上，量化 這些差異是整個 點，但也從一個字體 面變化另一個，並且也可以在給定的面內變化 。

Answer 2

normal是line-height的有效設置，因此對於那些將返回該值的瀏覽器並沒有真正的解決方法。

或者，您可以使用.css('height')，因爲它只會計算元素的內部部分，而不是padding/border/margin。如果你有一個多行元素，或者一個元素不僅僅是文本，它會帶來一點創意。

http://jsfiddle.net/xVBfb/

編輯：周圍的工作的一個例子是具有

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

的元素中，然後找到行高你可以只使用#def的.height()因爲它總是隻有一行，因此也就是父元素的行高。

---

瀏覽器在Windows XP是，除非明確規定，否則在返回的jsfiddle一個normal瀏覽器的一個例子。 Firefox返回一個像素數。 normal是每個w3規格的初始值。 http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Answer 3

據this page，看來最近的瀏覽器使用line-height: normal相同的值：1.14，ID EST的font-size財產與1.14係數。

試圖與幾個瀏覽器（在Windows XP）：

• 的Chrome 21.0.1180.75
• 火狐14.0.1
• 的Safari 5.1.7
• 歌劇11.64
• IE 7
• IE 8

編輯

我錯了，line-height取決於font-family，font-size，您的瀏覽器，也許你的操作系統...

更多閱讀Eric Meyers' website。

Answer 4

精確計算像素中的法線高度很困難。雖然，根據MDN它大約1.2em。

如果您已經：

body{ 
    font-size: 16px; 
} 

所以，你的網站有正常的字體大小爲16像素，然後正常的line-height將大致24px。這意味着您可以計算正常的字體大小像素值乘以1.5即16px * 1.5 == 24px

注意：由於px值和em值之間存在差異，所以我沒有乘以1.2。

Answer 5

然而，這是很久以前寫的，但幫助我在​​我的任務中寫下臨時解決方案。我正在複製這些代碼，而不是其他人可以使用的代碼。

$('#lineHeightInc') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct++; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
}); 

$('#lineHeightDic') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct--; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
});