input 按鈕在IE下顯現(xiàn)不一致的兼容問題
發(fā)布時間：2012-12-24 11:00:45 作者：佚名 
我要評論
我要評論這段時間在處理網(wǎng)頁默認(rèn)的input 按鈕時，IE下常顯現(xiàn)不一致的寬度問題，讓人感到很糾結(jié),今天抽時間整理了一些，貼出來和大家分享下，希望對你們有幫助
這段時間在處理網(wǎng)頁默認(rèn)的input 按鈕時，IE下常顯現(xiàn)不一致的寬度問題，讓人感到很糾結(jié)。所以今天請教了幾位高手把這個問題解決了，現(xiàn)在貼出來和大家共享一下，當(dāng)然這個方法在網(wǎng)上曾有人寫過，大家可以一起來相互探討一下。
Html Code:
復(fù)制代碼
代碼如下:<input type="submit“; class="form-submit" value="subscribe" name="op" id="edit-submit" / >
我先在這里貼出一段初始的CSS樣式
CSS Code:
復(fù)制代碼
代碼如下:input.form-submit {
border-radius: 3px;//FF下的實現(xiàn)圓角
-webkit-border-radius: 3px;//Safari,Chrome下實現(xiàn)圓角
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
}
我看先來看看效果圖吧：
從上圖中我們明顯可以看出，只有在Firefox下顯示才是正常，在IE7和IE下沒有圓角效果，這個都是眾所周知，但I(xiàn)E7具有一個致命的問題，就是寬度變長了，大家一定會感到奇怪，我們沒有定寬度的呀，怎么會這樣呢？呆會我們會引用別人的說法了說明這個問題；另外就是Safari和Chrome下高度怎么也不行的呀。
就是因為這樣的問題，我糾結(jié)了一個下午，但在高人的指點下，還是找到了相關(guān)的解決辦法，現(xiàn)在我們一起來看看高人是如何解決這樣的兼容問題。在IE7下會隨著文字的增加導(dǎo)致文本距離按鈕左右兩側(cè)的間距越來越大，這樣就導(dǎo)致了上圖中所看到的效果，但該問題存在于IE6/IE7，F(xiàn)F、IE8以及Opera 10沒發(fā)現(xiàn)類似問題。對于另一情況，小生至今還沒有弄明白為什么在Safari和Chrome下會出現(xiàn)高度問題，還希望各位前輩和高手指點。
針對前面的Bug，我對我的CSS稍加做了修改，如下：
復(fù)制代碼
代碼如下:input.form-submit {
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
height: 27px;
line-height: 19px;
margin: 0;
overflow: visible;
width: auto;
*width: 1;
}
也就是我在以前的基礎(chǔ)上增加了以下幾行代碼
復(fù)制代碼
代碼如下:input.form-submit {
height: 27px;//設(shè)置行高是為了解決Safari和Chrome下的高度問題
line-height: 19px;//讓文字居中顯示
margin: 0;
overflow: visible;//只有設(shè)置這個屬性IE下padding才能生效
width: auto;//現(xiàn)代瀏覽器下識別
*width: 1;//IE7和IE6識別，設(shè)置值為1,我也不知道有何作用，但有些人此處設(shè)置值為0
}
這樣我們就把那個頭痛的問題解決了，大家可以一起看看修改后的效果：
這里提醒大家，對于字居中的問題，不僅受行高影響，而且還受其字體，字號的影響，大家感興趣的可以嘗試一下。
相關(guān)文章
- 請在各瀏覽器里查看以下input的顯示效果！ 解決后顯示效果！ 具體代碼 .button{ margin:0; padding:0 0.25em; width:auto; *width:1;/*寬度不帶單位我是第一次見，2009-06-05
- 網(wǎng)頁制作Webjx文章簡介：你是不是覺得自己的主頁不夠靚麗，想讓它有所改變呢？聽說過樣式表格嗎？就是CSS，它就是那個能讓你更為準(zhǔn)確地控制網(wǎng)頁的東東。2009-04-02
- 在一些網(wǎng)站進行上傳時，當(dāng)單擊了“瀏覽”按鈕之后會彈出【選擇文件】的對話框。很多時候我們需要只上傳圖像文件，那么在彈出的【選擇文件】對話框中只顯示了相關(guān)2008-10-17
- 本篇文章小編為大家介紹，關(guān)于如何去掉submit按鈕背景陰影的解決方法。需要的朋友參考下2013-04-23
- 今天遇見一個bug，在ie下，input設(shè)置一個背景圖片如下圖：2011-08-02
適合絕大多數(shù)電腦用戶的老牌實用軟件 驅(qū)動精靈 2011V5.5.513.2020 綠色
驅(qū)動精靈 - 一款適合絕大多數(shù)電腦用戶的老牌實用軟件。 驅(qū)動精靈不僅可以快速準(zhǔn)確的檢測識別您系統(tǒng)中的所有硬件設(shè)備，而且可以通過在線更新及時的升級驅(qū)動程序，并且2011-05-15- 在使用IE6 IE7 等低級瀏覽器的人已經(jīng)被時代拋棄，下面為大家介紹下input 按鈕背景不顯示的具體解決方法，有此經(jīng)歷，由此需求的朋友可以參考下，希望對大家有所幫助2013-08-19
