作者補(bǔ)充話（2009年8月17日）：以下啰哩吧嗦的方法都不推薦的,，僅供參考,。
今天做頁面美化時(shí),，發(fā)現(xiàn)復(fù)選框與文字（文字大小為12px時(shí)）不對(duì)齊，有點(diǎn)不舒服,，得想辦法解決,，隨著問題解決的深入我發(fā)現(xiàn)這可不是一個(gè)想象中簡單的問題。待我慢慢敘來：
<div class="align">
<input type="checkbox" />
<span>為什么不對(duì)齊,？</span>
</div>
第一次,，line-height不頂用，各個(gè)瀏覽器均毫無反應(yīng),，罷了,；
第二次，input{margin-bottom:-3px;}IE下有用,，firefox下沒有反應(yīng),，不可取,；
第三次,，input{height:13px;} IE下有用，居中了,，可是firefox下,，還是沒有反應(yīng)；
第四次,，外部div使用vertical-align: middle,；居然IE下有效，firefox下沒有反應(yīng)
暈,，我有點(diǎn)服了,，這個(gè)firefox，我決定看看國內(nèi)的龍頭網(wǎng)站是怎么搞的,，記得雅虎首頁有郵箱登陸,，于是進(jìn)入，結(jié)果（有點(diǎn)出乎意料）：
也是不對(duì)齊,，怎么說呢,，我只能說這是個(gè)難以解決的問題的辦法吧,，IE下是對(duì)齊的，
連前端一向很贊的雅虎都沒有很好的解決firefox下的這個(gè)問題,，所以讓我覺得我下面這個(gè)方法還是相當(dāng)可取的,，而且個(gè)人覺得可以當(dāng)一個(gè)模板來用。
<title>文本框與文字的對(duì)齊</title>
</head>
<style type="text/css">
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align span{ display:block; float:left; padding-top:3px; *padding-top:5px;}
</style>
<body>
<div class="align">
<input type="checkbox" />
<span>為什么不對(duì)齊,？</span>
</div>
</body>
另外一種方法：
<style type="text/css">
.align{font-size:12px;}
.align input{display:block;} /*如果只針對(duì)IE和火狐瀏覽器,，這句話可以省掉*/
.align span{display:block; margin-left:22px!important; margin-left:11px; margin-top:-16px; float:left;}</style>
</head>
<body>
<div class="align">
<input type="checkbox" />
<span>為什么不對(duì)齊？</span>
</div>
</body>
一旦將后面的文字設(shè)為block屬性,，則其與前面的inline屬性的input肯定會(huì)顯示在兩行,，不過沒有關(guān)系，讓文字<span>標(biāo)簽的margin-top為負(fù)值,，那么他又會(huì)跑到上面,，與input在同一行，加上margin-left,，于是文字就會(huì)在input之后：
單選框和復(fù)選框的大小是固定的,，都是12px*12px，所以只要套用上面的數(shù)據(jù)值,，各個(gè)地方都可以用,，前提是外部有個(gè)div。
不過在opera下,，效果不是很好,，文字很上，原因是默認(rèn)情況下文字與input就是文字偏上的,，所以margin-top負(fù)值后就更加上了,。可謂魚和熊掌不可兼得啊,，我也開始明白為什么雅虎首頁放著單選框,，復(fù)選框與文字不對(duì)齊這個(gè)問題不管的原因了。
其實(shí)做到上面那個(gè)程度,，直接讓input,，span都是block屬性都float：left，再在span之中控制文字高度即可,。簡單易用,，可是兩個(gè)inline元素都變成block，都資源占有和css渲染效率上來講都是不可取的,，最后，我是死心了,，還是放著不管好,，或是用上面第二,、三。四的方法,，讓IE下正常就好了,，畢竟中國大大部分網(wǎng)名都用的IE瀏覽器?！l(fā)現(xiàn)繞了一圈,，做法跟雅虎頁面上的一樣了，唉,，該死的a,b,c,d瀏覽器啊,。
忙了會(huì)兒別的事，想到這個(gè)問題就不死心,，于是有做了一下處理,，對(duì)一些數(shù)據(jù)調(diào)試了一下，算是完成了對(duì)IE,，firefox火狐瀏覽器,，opera瀏覽器，谷歌瀏覽器都兼容的復(fù)選框與文字對(duì)齊的方法（個(gè)人不推薦,，有些不劃算）：
<title>文本框與文字對(duì)齊</title>
<style type="text/css">
.align{font-size:12px;}
.align input{display:block;}
.align span{display:block; margin-left:22px!important; margin-left:11px; margin-top:-16px; float:left; height:16px; line-height:14px;}
</style>
<body>
<div class="align">
<input type="checkbox" />
<span>為什么不對(duì)齊,？</span>
</div>
</body>
或者是：
<title>文本框與文字對(duì)齊</title>
<style type="text/css">
.align2{font-size:12px;}
.align2 input{display:block; float:left; margin-right:4px;}
.align2 span{display:block; float:left; height:20px; line-height:20px; *line-height:22px;}
</style>
<body>
<div class="align2">
<input type="checkbox" />
<span>為什么不對(duì)齊？</span>
</div>
</body>
寫到最后說句總結(jié)性的話吧,，還是vertical-align: middle的性價(jià)比最好啊,，用這個(gè)吧。
補(bǔ)充于2009年10月22日：使用verticla-align:-3px;即可
