html - 如何删除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;
}	
.select2-container {
	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>