DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁設計技巧:input按鈕在IE浏覽器的兼容問題
CSS網頁設計技巧:input按鈕在IE浏覽器的兼容問題
編輯:CSS進階教程     

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

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下的實現圓角
  -webkit-border-radius: 3px;//Safari,Chrome下實現圓角
  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下沒有圓角效果,這個都是眾所周知,但IE7具有一個致命的問題,就是寬度變長了,大家一定會感到奇怪,我們沒有定寬度的呀,怎麼會這樣呢?呆會我們會引用別人的說法了說明這個問題;另外就是Safari和Chrome下高度怎麼也不行的呀。

就是因為這樣的問題,我糾結了一個下午,但在高人的指點下,還是找到了相關的解決辦法,現在我們一起來看看高人是如何解決這樣的兼容問題。在IE7下會隨著文字的增加導致文本距離按鈕左右兩側的間距越來越大,這樣就導致了上圖中所看到的效果,但該問題存在於IE6/IE7,FF、IE8以及Opera 10沒發現類似問題。對於另一情況,小生至今還沒有弄明白為什麼在Safari和Chrome下會出現高度問題,還希望各位前輩和高手指點。

針對前面的Bug,我對我的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;

}

也就是我在以前的基礎上增加了以下幾行代碼


input.form-submit {
  height: 27px;//設置行高是為了解決Safari和Chrome下的高度問題
  line-height: 19px;//讓文字居中顯示
  margin: 0;
  overflow: visible;//只有設置這個屬性IE下padding才能生效
  width: auto;//現代浏覽器下識別
  *width: 1;//IE7和IE6識別,設置值為1,我也不知道有何作用,但有些人此處設置值為0
}

這樣我們就把那個頭痛的問題解決了,大家可以一起看看修改後的效果:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved