input 按鈕在IE下顯現不一致的兼容問題

這段時間在處理網頁默認的input 按鈕時,IE下常顯現不一致的寬度問題,讓人感到很糾結 。所以今天請教了幾位高手把這個問題解決了,現在貼出來和大家共享一下,當然這個方法在網上曾有人寫過 , 大家可以一起來相互探討一下 。
Html Code:

input 按鈕在IE下顯現不一致的兼容問題

我先在這里貼出一段初始的CSS樣式
CSS Code:
input 按鈕在IE下顯現不一致的兼容問題

【input 按鈕在IE下顯現不一致的兼容問題】我看先來看看效果圖吧:
input 按鈕在IE下顯現不一致的兼容問題

從上圖中我們明顯可以看出,只有在Firefox下顯示才是正常,在IE7和IE下沒有圓角效果,這個都是眾所周知,但IE7具有一個致命的問題,就是寬度變長了 , 大家一定會感到奇怪,我們沒有定寬度的呀,怎么會這樣呢?呆會我們會引用別人的說法了說明這個問題;另外就是Safari和Chrome下高度怎么也不行的呀 。
就是因為這樣的問題 , 我糾結了一個下午,但在高人的指點下,還是找到了相關的解決辦法,現在我們一起來看看高人是如何解決這樣的兼容問題 。在IE7下會隨著文字的增加導致文本距離按鈕左右兩側的間距越來越大,這樣就導致了上圖中所看到的效果,但該問題存在于IE6/IE7,FF、IE8以及Opera 10沒發現類似問題 。對于另一情況,小生至今還沒有弄明白為什么在Safari和Chrome下會出現高度問題,還希望各位前輩和高手指點 。
針對前面的Bug , 我對我的CSS稍加做了修改,如下:
input 按鈕在IE下顯現不一致的兼容問題


也就是我在以前的基礎上增加了以下幾行代碼
input 按鈕在IE下顯現不一致的兼容問題

這樣我們就把那個頭痛的問題解決了 , 大家可以一起看看修改后的效果:
input 按鈕在IE下顯現不一致的兼容問題

這里提醒大家,對于字居中的問題 , 不僅受行高影響,而且還受其字體,字號的影響,大家感興趣的可以嘗試一下 。


相關經驗推薦