glyphicons高度与select2下拉列表不匹配

Question

当我添加select2下拉列表时，glyphicons图标高度不同

这是html代码

 <form class="well form-horizontal" action=" " method="post" id="user_edit">

  <div class="form-group">
        <label class="col-md-1 nopadding control-label"></label>
        <div class="col-md-8 nopadding inputGroupContainer">
            <div class="input-group field-width">

             <span class="input-group-addon" >
              <i class="fa fa-venus-mars" ></i></span>
               <select name="gender" id="gender" class="gender form-control 
     js-example-basic-single">
                    <option value="">Not Telling</option>
                    <option value="m">Male</option>
                    <option value="f">Female</option>
                </select>

            </div>
        </div>
    </div>
    </form>

js文件

$(document).ready(function() {
    $(".js-example-basic-single").select2();
});

我为select2添加的css文件

.glyphicon{
color:#007bcc;
 }
 .select2-selection__rendered{
 line-height: 32px!important;
 }
 [class^='select2'] {
 border-radius: 0px !important;
 }

 .select2-selection__arrow{
  height: 34px;!important;
  }
 .select2-container--default .select2-selection--single{
 background-color: #eeeeee !important;
 height: 34px!important;
 font-size: 15px;!important;
  margin-top: 0.5px!important;
 margin-left: -1px!important;

 }

当我将页面放大100％以上时，高度相同。

Answer 1

从margin-top: 0.5px!important;

中删除.select2-container--default .select2-selection--single

$(document).ready(function() {
    $(".js-example-basic-single").select2();
});

.glyphicon{
color:#007bcc;
 }
 .select2-selection__rendered{
 line-height: 32px!important;
 }
 [class^='select2'] {
 border-radius: 0px !important;
 }

 .select2-selection__arrow{
  height: 34px;!important;
  }
 .select2-container--default .select2-selection--single{
 background-color: #eeeeee !important;
 height: 34px!important;
 font-size: 15px;!important;

 margin-left: -1px!important;

 }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
     <form class="well form-horizontal" action=" " method="post" id="user_edit">
  <div class="form-group">
        <label class="col-md-1 nopadding control-label"></label>
        <div class="col-md-8 nopadding inputGroupContainer">
            <div class="input-group field-width">
             <span class="input-group-addon" >
              <i class="fa fa-venus-mars" ></i></span>
               <select name="gender" id="gender" class="gender form-control 
     js-example-basic-single">
                    <option value="">Not Telling</option>
                    <option value="m">Male</option>
                    <option value="f">Female</option>
                </select>
            </div>
        </div>
    </div>
    </form>