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;
}