MilchFlasche 寫:
嗯嗯，我的CSS的#container有設line-height: 120%耶，你怎麼知道？
不過我把那行disable掉以後，IE還是沒有好轉？要不要試試看？
因為我見到行跟行之間還有空隙...
有時候不能直接 View CSS Source 還是蠻麻煩...
其實這個 case 帶出了很多問題, 跟 line-height, float 和 block-level element 的處理都有關係... 但最主要還是在 line-height 上面...
結論先說, Fx 錯了，解決方法是把 line-height 的 120% 改成 1.2...
120% 跟 1.2 這兩個 value 看上去似乎一樣, 但實際上是有不同的...
--文章 mode 轉換--
先來看一下 CSS2.1 的 spec 怎麼說。
引言回覆:
<number>
The used value of the property is this number multiplied by the element's font size. Negative values are illegal.
The computed value is the same as the specified value. <percentage>
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
分別就在我粗體掉的那句，用實例說明一下。看下面：
代碼:
HTML:
<div id="outer">Outer Text.
<div id="inner">Inner Text.</div>
</div>
CSS:
#outer {
font-size: 10pt;
line-height: 150%;
}
#inner {
font-size: 2em;
}
這樣的話，正常來說 #outer 的 line-height 會是 10pt*150% = 15pt ，然後 #inner 的應該是 2*10pt*150% = 30pt 罷？
但這樣的想法是錯的，實際上 #inner 的 line-height 會跟 #outer 的一樣，是 15pt 。因為 #inner 從 #outer 那裡 inherit 回來的 value 不是 specified value 150% ，而是 computed value 15pt (註： Inheritance 是用 computed value 來進行的)。
那麼用 1.5 的場合呢？ #inner 的 line-height 的 value 則會是予想之內的 30 pt 。因為如果 value 是 number 的話，上面說到 computed value 和 specified value 是一樣的，故此 #inner inherit 到的 value 是 1.5 ， line-height 也就是 10pt*2*1.5 = 30pt 了。
好了，那麼這個 line-height 跟 float element 的顯示又有什麼關係呢？
這個請自已想 XD (我累了咩…) 。在此附上 testcase 一個以作參考。
代碼:
HTML:
<div><span>I</span> am a boy.<br />She is a girl.</div>
CSS:
div {
line-height: 100%;
font-size: 10pt;
}
div span {
float: left;
font-size: 2em;
}
加送 Screenshot 一張。 (under Fx 1.0.4, with Web Developer outline)
(注意 span 的 outline)
可是改成這樣的話卻有不同的 Rendering 。
代碼:
HTML:
<div>I am a boy.<br />She is a girl.</div>
CSS:
div {
line-height: 100%;
font-size: 10pt;
}
div:first-letter {
float: left;
font-size: 2em;
}
(不知道為什麼 outline 不到 div:first-letter)
我就是不明白 div:first-letter 跟那個 span 有什麼分別， first-letter 在 Fx 上會有特別處理 (也許是我錯了也說不定?) 。
接著的 text-indent 有機會再寫罷...(我承認我很懶)。
登入
註冊
問答集
搜尋
