IE、Chrome、Firefox下的按鈕文字居中

    許久沒有整理項目中用到的知識了，就着如今正在開發本身的網站，就把一部份相關知識進行整理。下面是碰到的按鈕在瀏覽器中的顯示問題進行總結：

HTML代碼：

<label>Label：</label>

<input type="text" />

<input type="button" value="確  定" />

<input type="button"  value="Submit" />

能夠看到，Chrome、Firefox下的按鈕文字，不管中文英文都是默認垂直居中的。可是IE下英文和中文確不行，這是讓人鬱悶的事，開始調整它吧，加入樣式，讓它變得漂亮一些：

.txt  { border:1px solid #D4D0C8;height:18px;padding:2px 1px 1px 3px; *padding:2px 1px 1px 4px;display:inline-block;/*FF2.0*/-moz-display:inline-block; }

input {font-family:Tahoma, Arial, Helvetica, sans-serif;vertical-align:middle;}

.btn {

    border-style:solid;cursor:pointer;text-align:center;

    display:inline-block;/*FF2.0*/-moz-display:inline-block;

    font-family:Verdana;*font-family:Georgia;_font-family:Tahoma;

    padding:0 10px 1px;*padding:3px 3px 1px;_padding:0 4px 1px;

    line-height:18px;*line-height:14px;_line-height:16px;

    height:23px;font-size:12px;

}

上面的不一樣顏色的三行代碼很重要，它決定着IE下的按鈕的文字是居中，尤爲是英文和中文時。其實這是一個很奇怪的現象，在IE6下，當字體設置爲Tahoma時，按鈕中的中文和英文文字就垂直居中了，而IE7下須要設置爲Georgia，而且英文字的話，會有1px的誤差（這1px我已無能爲力了，如有高手實現，還請告之，感謝）。而在Chrome或者Firefox瀏覽器下，設置爲Verdana或者Tahoma均可以。另外，將input的vertical-align:middle;是爲了在同一行時，全部的控件均能對齊，而無需表格相助。

如今好多了，基本上中文和英文都處於「居中」狀態（IE7下有1px的誤差）。

HTML代碼：

 

<label>Label：</label>

<input type="text" class="txt" />

<input type="button" class="btn" value="確  定" />

<input type="button" class="btn" value="Submit" />

最後再來進行美化一下，基本上按鈕的樣式就無懈可擊了。固然，英文文字在不一樣的瀏覽器下，會呈現不動的字體。

若是，哪位高手有完美的方案，還請教之，小弟多謝了。