如何刪除Firefox瀏覽器下拉之間的空間

Question

我已經在Chrome中測試過所有沒關係，沒有空間。但是，當我在Firefox中打開，輸入字段的位置是變化，並有下拉之間的空間。

從火狐瀏覽器

從Chrome瀏覽器

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

.dob_m{ 
 
    height: 34px;!important; 
 
    width: 110px;!important; 
 
} 
 
.dob_d{ 
 
    height:34px;!important; 
 
    width: 65px;!important; 
 

 
} 
 
.dob_y{ 
 
    height:34px;!important; 
 
    width: 85px;!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"> 
 
      <div class="col-md-8 inputGroupContainer"> 
 
       <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 

 
        <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single "> 
 
        
 
        </select> 
 
        <select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single "> 
 
         
 
        </select> 
 
        <select name="dob_year" id ="dob_year" class=" js-example-basic-single dob_y"> 
 
         
 
        </select> <input type="hidden" name="dob" value="1" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</form> 
 
    
 
<script> 
 
     $(document).ready(function() { 
 
      var month = [], day = [], year = []; 
 

 
      for (var i = 1; i <= 12; i++) { 
 
       month.push(i); 
 
      } 
 
      for (var i = 1; i <= 31; i++) { 
 
       day.push(i); 
 
      } 
 
      for (var i = 1900; i <= (new Date().getFullYear()); i++) { 
 
       year.push(i); 
 
      } 
 
      $.each(day, function (index, d) { 
 
       $("#dob_day").append("<option>" + d + "</option>"); 
 
      }); 
 
      $.each(month, function (index, m) { 
 
       $("#dob_month").append("<option>" + m + "</option>"); 
 
      }); 
 
      $.each(year, function (index, y) { 
 
       $("#dob_year").append("<option>" + y + "</option>"); 
 
      }); 
 
     }); 
 
    </script>

如何修復領域的地位是相同的所有瀏覽器

Answer 1

簡單地解決這個問題，添加float:left到.select2-container或者你需要刪除inline-block的元素之間的whitespace，檢查此鏈接https://davidwalsh.name/remove-whitespace-inline-block

.select2-container { 
    float: left !important; 
} 

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

.dob_m{ 
 
    height: 34px;!important; 
 
    width: 110px;!important; 
 
} 
 
.dob_d{ 
 
    height:34px;!important; 
 
    width: 65px;!important; 
 

 
} 
 
.dob_y{ 
 
    height:34px;!important; 
 
    width: 85px;!important; 
 
} \t 
 
.select2-container { 
 
\t float: left !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"> 
 
     <div class="col-md-8 inputGroupContainer"> 
 
      <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 

 
       <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single "> 
 
       
 
       </select><!-- 
 
       --><select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single "> 
 
        
 
       </select><!-- 
 
       --><select name="dob_year" id ="dob_year" class=" js-example-basic-single dob_y"> 
 
        
 
       </select> <input type="hidden" name="dob" value="1" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</form> 
 
    
 
<script> 
 
    $(document).ready(function() { 
 
     var month = [], day = [], year = []; 
 

 
     for (var i = 1; i <= 12; i++) { 
 
      month.push(i); 
 
     } 
 
     for (var i = 1; i <= 31; i++) { 
 
      day.push(i); 
 
     } 
 
     for (var i = 1900; i <= (new Date().getFullYear()); i++) { 
 
      year.push(i); 
 
     } 
 
     $.each(day, function (index, d) { 
 
      $("#dob_day").append("<option>" + d + "</option>"); 
 
     }); 
 
     $.each(month, function (index, m) { 
 
      $("#dob_month").append("<option>" + m + "</option>"); 
 
     }); 
 
     $.each(year, function (index, y) { 
 
      $("#dob_year").append("<option>" + y + "</option>"); 
 
     }); 
 
    }); 
 
</script>

Answer 2

這是由於selects之間line breaks。所以爲了避免打破縮進，我添加了HTML評論between選擇`。

或者，您可以將所有selects放在同一行代碼中。

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

.dob_m{ 
 
    height: 34px;!important; 
 
    width: 110px;!important; 
 
} 
 
.dob_d{ 
 
    height:34px;!important; 
 
    width: 65px;!important; 
 

 
} 
 
.dob_y{ 
 
    height:34px;!important; 
 
    width: 85px;!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"> 
 
      <div class="col-md-8 inputGroupContainer"> 
 
       <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 

 
        <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single "> 
 
        
 
        </select><!-- 
 
        --><select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single "> 
 
         
 
        </select><!-- 
 
        --><select name="dob_year" id ="dob_year" class=" js-example-basic-single dob_y"> 
 
         
 
        </select> <input type="hidden" name="dob" value="1" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</form> 
 
    
 
<script> 
 
     $(document).ready(function() { 
 
      var month = [], day = [], year = []; 
 

 
      for (var i = 1; i <= 12; i++) { 
 
       month.push(i); 
 
      } 
 
      for (var i = 1; i <= 31; i++) { 
 
       day.push(i); 
 
      } 
 
      for (var i = 1900; i <= (new Date().getFullYear()); i++) { 
 
       year.push(i); 
 
      } 
 
      $.each(day, function (index, d) { 
 
       $("#dob_day").append("<option>" + d + "</option>"); 
 
      }); 
 
      $.each(month, function (index, m) { 
 
       $("#dob_month").append("<option>" + m + "</option>"); 
 
      }); 
 
      $.each(year, function (index, y) { 
 
       $("#dob_year").append("<option>" + y + "</option>"); 
 
      }); 
 
     }); 
 
    </script>