line-height使文本居中的3像素bug問題
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:21:05 作者:佚名
我要評(píng)論

雖然題目這么寫,可是這真是bug嗎?我覺得不算。
line-height使文本居中的3像素bug,先查下這3px的底細(xì),怎么查?觀察 FW
先寫個(gè)height、line-height都為30px,背景為紅色的元素,設(shè)置文字為12px。然后量下,果然有3px的bug。同時(shí)增加或者減少height、line-height 1px
雖然題目這么寫,可是這真是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,這樣看來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)行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
相關(guān)文章
解決line-height=height元素高度但是文字并沒有垂直居中的問題
這篇文章主要介紹了解決line-height=height元素高度但是文字并沒有垂直居中的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的2020-08-19深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理,通過本文的介紹相信對(duì)大家以后使用line-height和設(shè)置文本垂直居中會(huì)更加熟練,有需要的可以參考借鑒。下面一2016-08-12- 我們?cè)赾ss編寫中需要對(duì)大篇幅的內(nèi)容顯示的更好看,有些間隔,不要在擠在一起難看,就可以使用Line-Height屬性進(jìn)行控制2013-07-20
詳解HTML中字體使用line-height依然不能垂直居中解決辦法
這篇文章主要介紹了詳解HTML中字體使用line-height依然不能垂直居中解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友2020-08-20