line-height使文本居中的3像素bug問題

2024-07-11 08:42:37

字體：大中小

供稿：網(wǎng)友

雖然題目這么寫，可是這真是bug嗎？我覺得不算。
line-height使文本居中的3像素bug，先查下這3px的底細(xì)，怎么查？觀察 FW
先寫個(gè)height、line-height都為30px，背景為紅色的元素，設(shè)置文字為12px。然后量下，果然有3px的bug。同時(shí)增加或者減少height、line-height 1px發(fā)現(xiàn)如果當(dāng)前值是奇數(shù)那1px會(huì)加到文字和底部空間里而減少時(shí)減掉的是文字和頂部空間的1px（加下減上）；為偶數(shù)時(shí)剛好相反：加上減下。當(dāng)我們給文字加下劃線的時(shí)候發(fā)現(xiàn)文字的垂直位置并沒變，這能說明什么呢？還不太肯定，繼續(xù)同時(shí)減小heighe、line-height直到一個(gè)合適的值：14px，這時(shí)候我們可以看到文字和下劃線都是完整的，繼續(xù)減小1px。這時(shí)IE已經(jīng)不按我們剛才發(fā)現(xiàn)的規(guī)矩辦事了，文字上面被截去1px，這樣看來(lái)14px應(yīng)該是IE認(rèn)為的一個(gè)臨界點(diǎn)，此時(shí)整體高低減去文字高度剛好為3px。會(huì)不會(huì)？。。。因?yàn)檫@時(shí)文字是頂這上邊界的，我們把文字增加到2行，發(fā)現(xiàn)了吧，第二行的文字不是頂這第一行的下劃線的，而是有1px的距離。3px果然是下劃線的高度。
其實(shí)這里還有一點(diǎn)特殊的地方就是如果我們一開始把height、line-height都設(shè)為31px那這時(shí)3px會(huì)變?yōu)?px。這個(gè)可以用我們上面得出的“偶數(shù)情況加上減下的結(jié)論”解釋：heighe、line-height同為30px的時(shí)候上下空白區(qū)域高度差是3px，然后height、line-height同時(shí)加1px，這1px應(yīng)該是加到上部空間里，所以3pxbug會(huì)變成2pxbug。

運(yùn)行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無(wú)標(biāo)題文檔</title></head><body ><div style="height:23px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;overflow:Hidden;">文字字</div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

上一篇：IE8.0Beta比較不錯(cuò)的功能:WebSlices

下一篇：CSS高級(jí)技巧:網(wǎng)頁(yè)布局