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