ie 9 select 下拉框 右側 箭頭

由於 不同瀏覽器的 select 選項的默認樣式不同，為了樣式統一性。

則 刪去瀏覽器的默認樣式

select.form-control {
  /*Chrome和Firefox里面的邊框是不一樣的，所以復寫了一下*/
  /*border: solid 1px #000;*/
 
  /*很關鍵：將默認的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
 
  /*在選擇框的最右側中間顯示小箭頭圖片*/
  background-image: url("../icons/down.png");
  background-repeat: no-repeat;
  background-position: center right;
 /*background:red ;*/
  /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
  padding-right: 14px;
}

並同意修改為 background-image: url("../icons/down.png");

這樣出現一個問題，在ie9 中 ，清除 select 的方法 不成功，依然存在 默認的下拉箭頭。這樣就導致兩個箭頭同時存在。

1、采用 ie9的hack 方式，添加 \9\0 后綴。

添加  background-image:none\9\0;

但是\9\0 后綴  ie10也支持，這就是 ie 比較惡心的一點。ie10 支持這種寫法可以，但是 ie10 中 select 的 默認樣式可以被清除，這樣就導致 在ie10中 添加的箭頭和默認的箭頭都不存在。

 

2、采用 if IE endif  兼容模式，但是 除了ie 之外，其他瀏覽器不識別

例如   

<!--[if!IE]>
　　<p>12312312312123</p>
<!<![endif]-->

chrome 瀏覽器就不識別

3、采用 navigator.userAgent  參數判斷瀏覽器版本進行兼容。

if(window.navigator.userAgent.indexOf('MSIE')>-1&&window.navigator.userAgent.charAt(30)==9){/*ie9下拉箭頭兼容*/
            var styles = document.createElement('style');
            styles.type = 'text/css';
            try{
                styles.innerHTML = 'select.form-control{ background-image:none!important;}input.ie9{width:68%!important;}'
            }catch(er){
                console.log(er)
            }
        }

可以精確地 判斷 瀏覽器是否為ie9 瀏覽器。

解決了這個問題。