FireFox 3行高

Firefox 3引入了一種新行爲，其中行高不設置時與其他瀏覽器渲染時不同。因此，該瀏覽器中的關鍵部分可能會過高。設定全球百分比不起作用，因爲它的基礎是不同的。設置無單位值（如「1」）也不起作用。有沒有辦法使這個維度標準化？FireFox 3行高

來源

2009-01-21 mmcglynn

也許一個例子頁面或東西？我沒有遇到這個問題。 – rfunduk 2009-01-21 17:49:35

確實。這裏沒有這樣的問題;問題不夠具體。 – bobince 2009-01-21 18:49:41

line-height: normal的計算值因平臺，瀏覽器（和您所說的同一瀏覽器的不同版本），字體以及相同字體的不同大小而異，分別爲(see Eric Meyer's article)。

設置無單位的值，如...

body {line-height: 1.2;}

... 應該工作正常化的瀏覽器之間的間距。如果這不起作用，你能提供一個更詳細的樣式表說明嗎？

獲得「像素完美」結果很難（不可能？），但爲了獲得儘可能可預測的結果，我嘗試使用行高度，該行高度在乘以字體時產生很好的舍入值-尺寸。我們無法知道用戶代理的默認字體大小，但16像素有點普遍。

body 
{ 
    font-size: 100%; 
    line-height: 1.5; 
}

如果用戶代理的出發字號確實是那麼16個像素的1.5行高出來一個不錯的，甚至是24個像素。儘管用戶可以並且確實改變了默認字體大小或頁面縮放，並且不同的瀏覽器具有不同的縮放頁面的方法。儘管如此，我認爲我已經爲大多數用戶取得了合理的成功。如果我無法準確確定線條高度，那麼我會在整數之上拍攝一點，而不是稍微低一點，因爲有些瀏覽器似乎會截斷值而不是四捨五入。

此外，請注意，如果您使用百分比作爲線條高度，則在繼承該值時的行爲將有所不同。

body 
{ 
    font-size: 100%; 
    line-height: 150%; 
} 

p 
{ 
    font-size: 75%; 
}

從16像素的基礎字體大小開始，行高將是24像素。在<p>元素內，字體大小變爲12像素，但行高不是而是變爲18像素，而是保持24像素。這是line-height: 1.5和line-height: 150%之間的差異。當使用body {line-height: 1.5;}時，<p>的線高度爲 18像素。

來源

2009-01-21 19:35:41

-1

您應該始終「重置」樣式以消除與元素樣式的所有瀏覽器不一致。我想要Eric Meyer's CSS Reset。 Yahoo也有一個。

來源

2009-01-21 17:56:05 cowgod

這種情況下復位值是多少？ 0？然後將行高添加到任何文本容器？我認爲這是一個與保證金和填充不同的問題。 – mmcglynn 2009-01-21 18:34:43

你絕對沒有辦法。每個瀏覽器都有呈現CSS和內容的方式。您可以使用「主」重置（如cowgod建議），但即使如此，這並不能最終解決對齊問題。他們在那裏是因爲實際的渲染引擎。將CSS添加到您現有的網站並進行測試。告訴我它是否使像素完美無缺。它不會。

實際實現像素完美的唯一方法是爲特定瀏覽器實現特定的CSS。 Mozilla擁有@-moz-doc，IE有它自己的黑客，但這些都不是W3C規範的一部分，我們都知道標準很重要。所以沒有太多的選擇。

正如大衛在上面所說，這很難。實際上，我傾向於認爲不可能。我花了好幾個小時嘗試，相信我！幾乎發瘋的次數超過了我的計數。這是一種難以吞嚥的藥丸，但除非每個人都使用相同的瀏覽引擎（實際上我認爲這會使互聯網向前邁進一大步），否則就沒有辦法繞過它。我的意思是，只要你插入[gecko] [webkit] [presto] [trident] [任何]來處理後端，就不會很難在你的瀏覽器上使用任何接口...因爲好那些都是開源的，你可以合併這些項目，並真正開始。人們需要學習如何發揮好在一起;）

來源

2010-01-24 09:32:03

你可以解決這個問題：使用填充頂和padding-底部，並設置高度爲自動

集線高度爲1，然後在文本爲零。

.zeroed_in_element { 
    padding: 4px 2px 5px 2px; 
    height: auto; 
    line-height: 1; 
}

來源

2012-05-07 16:22:29

回答

相關問題