IE下css設定select的諸多問題

阿新 • • 發佈：2019-01-11

IE下設定select的無法實現的。先改變select的尺寸可以設定select的寬高

示例程式碼

<html>
<head>
  <style>
  select{ height:20px; width:80px;}
</style>
</head>
<body>
<select>
<option>test1</option>
</select>
</body>

我想嘗試使用css來模擬實現可改變高度，其實ie67下可以通過設定font-size來實現改變select的高度，但是這個是個不是很靠譜的方法，我說下我實現的原理：
第一步：就是在select外邊加上兩個div分別是 select-outer 和select-inner，然後給他們成inline-block，這樣主要為了模擬select是內聯元素，然後給select-inner設定一個寬度和高度，這個寬度和高度就是實現重點，為什麼呢？大家可以自己做個測試，看看一個不設定任何屬性的select高度是多少？這個我做了測試，但是我給select設定了font-size:12px;因為這個是基本的不然漢字都看不清楚別的就不需要在談了，然後我給select設定了border:1px solid #ccc;同理也是為了統一不同的瀏覽器對select邊框設定的不同，在這兩個前提下我做了測試：IE67：21px； IE8：19px；IE9：18px；FF：18px；chrome：19px；safari：18px；從結果上可以看出，這種情況下的select的高度最大是21最小是18，還有就是我們發現ie67是一樣的，並且只有ie67不能更改高度，那麼解決的方案來了，那就是把select的高度設定21，那麼這個時候所有的瀏覽器的select的高度相同了，第一步解決了。
第二步：截掉select預設的邊框，這個時候我們的select-inner就派上用場了，方法是給select設定position:relative;margin:-1px;然後給select-inner 設定高度，高度就是上面的21-2=19，我想這個大家應該明白用意了，然後設定overflow:hidden，以及display:inline-block（這裡就不再介紹它的相容設定了，相信大家都很熟悉了）,這樣設定完在瀏覽器中看，除去ie67有瑕疵外其餘的良好邊框被截掉，但是ie67下的左右邊框擷取的不好，想想應該是沒有給select-inner設定寬度的原因，設定了寬度後ok都正常，現在的問題來了，寬度是多少取決於你給select設定了多度是多少？所以當select使用在諸多不同的位置的時候這個問題怎麼解決呢？這個也著實讓我很頭疼沒有辦法解決（如果你有好的方法可以告訴我），最後我使用了一個比較笨的方案，那就是給select-outer再加上一個class來控制寬度，這樣靈活性變得差了許多。
第三步：設定改變高度，我想你如果仔細看完上面的內容，那麼答案就很簡單了，那個是select-outer設定padding，這個padding-bottom=padding-top=(你要設定的高度-19)/2,當然padding的左右是多少你可以設定。然後給select-outer設定你想要的邊框和邊框顏色，到這裡就基本上完成了。其實我們可以把padding和邊框等等設定到上面說的另加的class上去，這樣只需要換這個class即可以不同的顯示效果了！

下面是程式碼示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
* { padding:0; margin:0; }
body { text-align:center; padding:50px;}
.select-outer { display:inline-block; *display:inline; zoom:1; border:1px solid #ccc; }
.select-inner { display:inline-block; *display:inline; zoom:1; height:19px; overflow:hidden; position:relative; }
.select-h { border:1px solid #ccc; height:21px; font-size:12px; position:relative; zoom:1; margin:-1px; }
.select-wh200 { padding:3px; }
.select-wh200 .select-inner { width:200px; }
.select-wh200 select { width:202px; }
</style>
</head>
<body>
<div class="select-outer select-wh200">
  <div class="select-inner">
    <select name="" class="select-h">
      <option value="">web標準學習aa</option>
      <option value="">jQuery學習</option>
    </select>
  </div>
</div>
<div class="select-outer select-wh200">
  <div class="select-inner">
    <select name="" class="select-h">
      <option value="">web標準學習</option>
      <option value="">jQuery學習</option>
    </select>
  </div>
</div>
<div class="select-outer select-wh200">
  <div class="select-inner">
    <select name="" class="select-h">
      <option value="">web標準學習</option>
      <option value="">jQuery學習</option>
    </select>
  </div>
</div>
</body>
</html>

IE下css設定select的諸多問題

IE下css設定select的諸多問題

css設定固定高度多行超出變省略號，適用於手機端

IE下css常見問題總結及解決

解決IE下CSS背景圖片閃爍的Bug

IE下如何設定iframe背景透明

解決Android系統中CSS設定select高度無效的BUG

關於在IE下對Select標籤設定innerHTML無效的問題

純css實現select下拉框並排顯示

ie下常見的css兼容問題

純css修改下拉列表select的默認樣式

用純css改變下拉列表select框的默認樣式

html之多行文本textarea 及下拉框select（12）

css設定多行超出變省略號，適用於手機端。

python學習之網站的編寫（HTML，CSS，JS）（十）----------CSS中用的最多的class選擇器，批量的為一些標籤設定相同的版式

Linux/Windows下C++設定執行緒名字方便多執行緒除錯

IE下複選框多次快速點選複選框狀態出現紊亂情況

雲環境下運維工作面對的諸多新挑戰

css設定多列等高佈局

如何設定select下拉禁止選擇

select2多選設定select多選，select2取值和賦值

IE下css設定select的諸多問題

相關推薦