select在PC端上的显示是一个特别蛋疼的事情，咱们先看一下代码以及截图，咱们可以看到得到，每个浏览器之间的差别。
还有当select不加border和加border时候的不一样的显示方式。
对，这些浏览器就是这么牛逼，牛逼到让人猝不及防。我都没敢把IE7的截图放出来。
CGL青格勒
CGL青格勒1
CGL青格勒2
CGL青格勒3
*{ margin:0; padding:0;}
select{ display:block;
height:32px;
line-height:32px;
font-size:14px;
width:240px;
margin:20px auto;}
后来得知select的样式是可以清除的，代码如下：
CGL青格勒
CGL青格勒1
CGL青格勒2
CGL青格勒3
*{ margin:0; padding:0;}
select{ display:block;
height:32px;
line-height:32px;
font-size:14px;
width:240px;
margin:20px auto;}
.select{appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
-khtml-appearance:none;}
.select::-ms-expand { display: none;}
截图如下：
这里除了火狐、IE89之外其他的浏览器都一样了。
火狐的显示只有稍微的不一样，文字和边框的距离比谷歌的要大，但是还是在可以接受的范围之内，经过一段考虑之后，直接放弃IE89，因为IE89没有找到方法。
那么接下来就比较好弄了，除了IE89咱们可以做成一样的，因为其他浏览器咱们取消了箭头，所以咱们还得模拟一个出来。
模拟之前咱们还得考虑低版本的IE浏览器，先来个截图
这里看看低版本IE里面按钮的宽度是多少，17px的宽度，那么咱们模拟出来的按钮的宽度不能大于17px：
咱们再次贴代码：
CGL青格勒
CGL青格勒1
CGL青格勒2
CGL青格勒3
*{ margin:0; padding:0;}
select{
display:block;
height:32px;
line-height:20px;
font-size:14px;
width:240px;
margin:20px auto;
background: url("jiantou.png") no-repeat right center;}
.select{appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
-khtml-appearance:none;}
.select::-ms-expand { display: none;}
然后截图一下：
ok，一个小小的下拉按钮出来了，当用户使用低版本的浏览器的时候，这个按钮隐藏在默认的按钮下面，当我们的清除样式奏效的时候就会出来。
