vertical-align在不同瀏覽器表現(xiàn)的研究
首先看看w3c中是怎么描述的。
該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。默認(rèn)值是baseline。允許指定負(fù)長(zhǎng)度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。
vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。
很重要的一點(diǎn)就是它是針對(duì)行內(nèi)元素起作用的，如果不是行內(nèi)元素或者沒(méi)有設(shè)置成display:inline或者display：inline-block的元素就可能出現(xiàn)各種各樣的問(wèn)題，有的生效了，有的卻沒(méi)有生效。
這里我舉例來(lái)說(shuō)明一下。 代碼如下所示：
2 <html >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
5 <style type="text/css">
6 * { margin:0; padding:0 }
7 #doc { width:990px; margin:0 auto; margin-top:50px; }
8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
9 .out-box { background:#dfdfdf; color:white; padding-left:10px;}
10 .in-box {float:left;width:5px; height:5px; background:blue;margin-right:10px;vertical-align:bottom;overflow:hidden; }
11 </style>
12 <title></title>
13 </head>
14 <body>
15 <div id="doc">
16 <h4>vertical-align的研究</h4>
17 <span class="out-box">
18 <div class="in-box">
19 </div> 研究vertical-align屬性的作用
20 </span>
21 </div>
22 </body>
23 </html>
結(jié)果如下圖所示：
，我們可以將div標(biāo)簽換成span標(biāo)簽，將浮動(dòng)去掉，并且添加display：inline-block，然后再去改變值，哈哈。小藍(lán)色方塊的位置改變了。這說(shuō)明了之前的結(jié)論。
語(yǔ)法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <長(zhǎng)度> | inherit。
對(duì)各個(gè)值的說(shuō)明 摘自w3cshool ，方便大家理解
| 值 | 描述 |
|---|---|
| baseline | 默認(rèn)。元素放置在父元素的基線上。 |
| sub | 垂直對(duì)齊文本的下標(biāo)。 |
| super | 垂直對(duì)齊文本的上標(biāo) |
| top | 把元素的頂端與行中最高元素的頂端對(duì)齊 |
| text-top | 把元素的頂端與父元素字體的頂端對(duì)齊 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的頂端與行中最低的元素的頂端對(duì)齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對(duì)齊。 |
| length | |
| % | 使用 "line-height" 屬性的百分比值來(lái)排列此元素。允許使用負(fù)值。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。 |
注意：這些值都是基于父元素的（好好的理解下父元素）。
關(guān)于上面各個(gè)值的深刻含義 ，對(duì)baseline等不理解的，在經(jīng)典論壇中有一篇很好的文章http://www.blueidea.com/tech/web/2008/5892.asp
1) 在ie6,7下，行高對(duì)vertical-align設(shè)置的元素是沒(méi)有作用的 text-top和top，text-bottom 和bottom的作用是一樣的。都是和父元素的文本上對(duì)齊和下對(duì)齊。但是在ie7上面有一段空白。如果設(shè)置屬性值為middle的時(shí)候，
會(huì)和父元素居中對(duì)齊。如果圖像比文字的行高高些，移動(dòng)的是文字，而非被設(shè)置的元素，反之，則是圖像了。 個(gè)人認(rèn)為ie6,7對(duì)這個(gè)屬性是誤解了。
2) 除了ie6,7 ，vertical-align受line box的影響，什么是line box ，之前我講過(guò)這個(gè)概念。就是行盒，它是將每一行看成一個(gè)盒子，既然是盒子肯定是有高度的，它的高度是由其內(nèi)部一序列inline box的高度共同決定的，
受line box的影響其實(shí)本質(zhì)上來(lái)說(shuō)就是受行高的影響。如果行高大于被設(shè)置vertical-align的元素的高度的時(shí)候，那么無(wú)論怎么調(diào)節(jié)值，如果其中包含文字的話，文字是不會(huì)動(dòng)的。其實(shí)，可以將line-box 看稱是父元素。
他們都是基于父元素而進(jìn)行微調(diào)的。很明顯其他的元素是不動(dòng)的。
3) 除了ie6,7如果行高小于要圖片的時(shí)候，這個(gè)時(shí)候圖片和文字將相互影響，共同決定的line box的高度。對(duì)于 middle& top& bottom 這3個(gè)值在ie8,9 以及firefox3.6 chrome的表現(xiàn)是一樣的。
4) ie8+和非lE序列對(duì)text-top&& text-bottom的理解不一樣。 在ie8+里面 圖片和文字是水平上對(duì)齊的，但是在firefox 3.6， chrome中圖片和文字在垂直方向上有一段距離，為什么呢，看看W3c關(guān)于 text-top 和text-bottom的解釋，很容易看出他們是相對(duì)于父元素字體對(duì)齊的。我用工具量了一下。是204px。為什么事204px呢？因?yàn)槲业母感懈呤?40px，而行高是可以繼承的，因此那個(gè)“前面”的行高也是140px，可以算出它到頂部是64px
為什么是64px呢，如果和“后面”這2個(gè)文字是居中對(duì)齊的話，將往下移動(dòng)70px，但是由于是頂部對(duì)齊的，所以往上移動(dòng)了半個(gè)字的高度，之前我把字設(shè)置了12px的大小。剛好是6px。text-bottom 的解釋也是類似的。
附圖和我研究的代碼：
2 <html >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
5 <style type="text/css">
6 * { margin:0; padding:0 }
7 #doc { width:990px; margin:0 auto; margin-top:50px; }
8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
9 .out-box { background:#dfdfdf; color:white; padding-left:10px;display:inline-block;line-height:205px;}
10 .in-box {display:inline-block;width:5px; height:5px; background:blue;margin-right:10px;overflow:hidden;vertical-align:middle }
11 img {vertical-align:middle; }
12 </style>
13 <title></title>
14 </head>
15 <body>
16 <div id="doc">
17 <h4>vertical-align的研究</h4>
18 <span class="out-box">
19 <span class="in-box">
20 </span> 研究vertical-align屬性的作用<img src="dj.jpg"/>
21 </span>
22 <div style="line-height:140px; border:1px solid #666;font-size:12px">
23 <span style="font-size:40px; border:1px solid #999; vertical-align:text-top;">前面</span>后面。
24 </div>
25 </div>
26 </body>
27 </html>
圖形如下所示：
在ie8,9的顯示是
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
