兼容问题

1. 低版本IE，低版本火狐下，获取不到button标签内的其他元素。

解决方法：

• 1.将button换成div标签；

• 2.或者将给span绑定的事件换成给button绑定事件。

2. select框在有些chrome浏览器里也不支持padding属性。

解决方法：

不要去用padding去撑select的宽度和高度，直接设置width/height即可。

3. 在主流浏览器（兼容性好的浏览器）里清除select框的默认样式

    <!-- html代码 -->
    <div class='select_box'>
        <select>
            <option>...</option>
            ...
        </select>
        <div class='.select_icon'></div>
    </div>

    /* css代码 */
    
    /*chrome浏览器、firefox浏览器*/
    .select_box {
        position: relative;
        border: 1px solid #d8d8d8;
    }
    .select_box select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /*ie9+*/
    .select_box select::-ms-expand{
        display: none;
    }

    .select_box .select_icon {
        position: absolute;
        right: 5px;
        top: 0px;
         图片宽度;
        height: 100%;
        background: url(图片路径) no-repeat center;
    }

    /*要想兼容IE8及以下的浏览器*/
    
    /*给.select_box添加overflow:hidden;属性 超出隐藏*/

    /*设置select框的宽度，使得它比.select_box的宽度宽15px*/

4. 各浏览器下button按钮内的文字垂直居中

设置button的line-height属性的属性值为：(height-4)px

    button { 
        height: 24px; 
        line-height: 20px; 
    }

未完待续......（有遇到的兼容问题请留言）