IE6設置select標籤高度兼容性問題

一、問題描述
相信大家都遇到過select在IE6、7下設置高度無效的問題,但是在IE8及以上高版本的瀏覽器設置是有效的,包含google/火狐等都是有效的,但是就算是有效,在以上瀏覽器設置height後,顯示的效果也是不一致的,有很大差異。[注:line-height的設定對select標籤在各瀏覽器中也是無效的]
[注:各版本瀏覽器對select標籤寬度width的設定都是有效和一致的,已經過測試]
二、解決方案
之前在網上看到有一個方案可以”很容易“解決IE67的select高度問題:設置font-size大小能直接影響高度,但是這種方法我試過,效果不是很好。具體解決辦法如下:
1、如果不用兼容IE6,7的話,直接設置select的padding值即可解決高度問題。以下是select標籤在各瀏覽器中的默認高度,根據默認高度,設置padding爲相應值,以使select達到所需高度。
select在各個瀏覽器上的默認值
2、如果要兼容IE6,7,那就需要使用另一種方案了(採取select被嵌套在兩層標籤裏,一層用來遮擋select的默認邊框[在IE6、7中設置border:0px也是無效的,高版本可用],另一層用來模擬”高度改變後的“select邊框),代碼如下:

<style type="text/css">
.border_select{ /*邊框*/
    display:inline-block;
    border:1px solid #ABADB3;
    border-top-color:#ABADB3;
    margin-top:2px;
    padding:5px; /*調整此處改變select高度*/
}
.select_default{ /*遮擋默認邊框*/
    display:inline-block;
    width:200px;
    *width:198px;
    height:18px;
    overflow:hidden;
}
.select_default select{
    *margin:-2px;
    padding:1px;
    border:0px;
    width:200px; /*select的寬度*/
}
</style>
<span class="border_select"><!--邊框-->
    <span class="select_default"><!--遮擋默認邊框-->
    <select>
        <option value="state" selected="selected">選項一</option>
        <option value="state">選項二</option>
        <option value="state">選項三</option>
        <option value="state">選項四</option>
        <option value="state">選項五</option>
    </select>
    </span>
</span>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章