IE6、7 按鈕文字垂直居中 按鈕文字在IE下的兼容性方案

　　這2天接手了一個離職的同事手頭上的工作，發現了一個通用按鈕樣式在IE下存在兼容性問題。

 

　　

先上代碼

display:inline-block;line-height:18px;margin-left:5px;border:1px #c4c3c3 solid;background:url(../images/bg_my3.gif)  0  0 repeat-x;text-align:center; cursor:pointer; width:45px

　　

　　本身我們想要的效果，也就是FF和IE8下的效果，如下圖

     

　　

　　但是在IE6和IE7下，底部多了一條白邊，如下圖

　　

 

　　這三個按鈕現在是沒有設置height的，如果我設置了height，IE8和FF，還是正常的。但是IE6和7變成這樣

　　

　　

　　在谷歌搜索了眾多資料，得出結論：

　　在對button清除padding和border之后，ie6，7都會在上內邊距產生1個像素的空間，firefox2，3（beta5）則會產生左右內邊距3個像素和上內邊距1個像素的空白

 

　　難道這個BUG是無法解決的？

 

　　於是我不死心，一邊和JQuery叢林的朋友討論，一邊繼續google~終於，皇天不負苦心人，在這一個網頁中，我得到了啟發：（附上網頁鏈接：http://www.14px.com/?p=27） 

　　我發現，把line-height改成16px或者14px，在IE6下都能得到不錯的效果，如下圖

　　

 

　　但是，當line-height:16px時，IE7下的效果則為

　　

 

　　當line-height:14px時，IE7下的效果又是

　　　　

　　

　　其實這2個效果已經差不多，但是我覺得當line-height:16px時，底部的空白還是要比line-height:14px時的空白要高一點點（好吧，我承認我比較鑽牛角尖。）於是我確定為我的樣式加上*line-height:14px;

　　不知道大家發現沒有，在line-height:14px;IE7下的按鈕的字距離頂部是幾乎沒有內邊距（padding-top），緊挨着，一點兒也不好看。於是我又加了一個+padding-top:1px;

　　

　　盡管加了+padding-top:1px;但其實效果還是不太理想的，因為文字並不是真正垂直居中的。不過，本人能力有限啊。求大家有更好的方法解決的貢獻出來吧！

　　最后把各瀏覽器下的效果再一起排排站吧

 

　　FF下     

　　IE8

　　IE7

　　IE6

 

　　到目前為止，代碼如下

　　

line-height:18px ; *line-height:14px;+padding-top:1px;margin-left:5px;border:1px #c4c3c3 solid;background:url(../images/bg_my3.gif)  0  0 repeat-x;text-align:center; cursor:pointer; width:45px

　

　　但是，別人做事怎么這么不負責任呢，這三個按鈕的間距也明顯不一樣啊，好在在IE下基本一致，只是IE和FF有差別，我繼續調整去……