IE6下 vertical-align:middle 和 height 引發(fā)的邊框消失
發(fā)布時(shí)間：2009-02-05 03:29:54 作者：佚名 
我要評論
我要評論css樣式：
<style type="text/css">
ul{ list-style:none;}
li,div{border:1px solid #ff0000; vertical-align:middle; height:50px;}
</style>
html結(jié)構(gòu)：
<div>測試</div>
（注意：<div>測試</div>后面沒有其他文字或元素
css樣式：
<style type="text/css">
ul{ list-style:none;}
li,div{border:1px solid #ff0000; vertical-align:middle; height:50px;}
</style>
html結(jié)構(gòu)：
<div>測試</div>
（注意：<div>測試</div>后面沒有其他文字或元素）
現(xiàn)象：
div的下邊框消失，在ff下沒事，且文字不能居中（如圖）。
html結(jié)構(gòu)2
<div>測試</div>
測試文字
--在后面再加上其他元素
邊框就顯示出來了
html結(jié)構(gòu)3
<div>測試</div>
<div>測試二</div>
<div>測試3</div>
結(jié)論：如果是為了文字居中，把line-height和height設(shè)置為相同的高度。不要多寫vertical-align:middle;
<style type="text/css">
ul{ list-style:none;}
li,div{border:1px solid #ff0000; vertical-align:middle; height:50px;}
</style>
html結(jié)構(gòu)：
<div>測試</div>
（注意：<div>測試</div>后面沒有其他文字或元素）
現(xiàn)象：
div的下邊框消失，在ff下沒事，且文字不能居中（如圖）。
html結(jié)構(gòu)2
<div>測試</div>
測試文字
--在后面再加上其他元素
邊框就顯示出來了
html結(jié)構(gòu)3
<div>測試</div>
<div>測試二</div>
<div>測試3</div>
結(jié)論：如果是為了文字居中，把line-height和height設(shè)置為相同的高度。不要多寫vertical-align:middle;
相關(guān)文章
css中圖片于文本的基線對齊與vertical-align屬性設(shè)置
默認(rèn)的情況是圖片頂對齊而文字底對齊，通過設(shè)置css屬性可以使得圖片與文字對齊，接下來為大家詳細(xì)介紹下設(shè)置各對象的vertical-align屬性，感興趣的朋友可以參考下哈2013-04-02css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個(gè)頁面css的時(shí)候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時(shí)之需，感興趣的朋友可以了解下哦2013-01-09css vertical-align屬性的一些理解與認(rèn)識(二) text-top篇
vertical-align是個(gè)相當(dāng)復(fù)雜與精深的屬性，所理解的一些內(nèi)容多少會有不準(zhǔn)確之處,本集內(nèi)容主要講講我對在一般情況下vertical-align其作用的理解，以及vertical-align相關(guān)的2013-01-07css vertical-align屬性的一些理解與認(rèn)識(一)
就說說我對vertical-align屬性的一些理解吧，純屬個(gè)人見解，若有不準(zhǔn)確之處還望見諒,若有不準(zhǔn)確之處還望見諒。還有，vertical-align屬性牽扯到的知識實(shí)在是太多了，不是一2013-01-07line-height 和 vertical-align 行高與行對齊精解 （圖文）
行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的， 同時(shí)也受字號的影響。2010-08-27- div vertical-align不起作用解決辦法，其實(shí)主要是文檔聲明。2010-03-25
- 最近的項(xiàng)目涉及到很多表單的制作，特別是復(fù)選框(checkbox)和單選框(radio)。但是在前端開發(fā)過程中發(fā)現(xiàn)，單(復(fù))選框和它們后面的提示文字在不進(jìn)行任何設(shè)置的情況下，是無法2009-07-29
- 網(wǎng)頁制作Webjx文章簡介：最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。2009-04-02
CSS實(shí)例:vertical-align屬性讓網(wǎng)頁層居中
網(wǎng)頁制作Webjx文章簡介：CSS實(shí)例:vertical-align屬性讓網(wǎng)頁層居中. vertical-align屬性使網(wǎng)頁層居中 網(wǎng)頁源代碼如下： <html> <2009-04-02css vertical-align屬性詳細(xì)圖解分析
vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同2009-02-10