Question

我的任务就是重做一些项目的布局。我是新手，所以如果这是一个简单的问题，我会提前道歉。

简而言之，在高图表图表上方有一排日期输入和按钮元素。这在Chrome中看起来很棒，但在firefox中却崩溃了。这两种浏览器都是最新的，无论windo大小如何，它似乎都是一个问题。

这里是代码：

<div class="input-group date pull-left row" 
                     style="width:100%; padding-right: 0px;">

                    <input type="text" 
                        class="form-control resize:none"
                        placeholder="Start Date"
                        title="Start Date"
                        ng-disabled="plotButtonActive"
                        datepicker-popup="yyyy-MM-dd"
                        ng-model="chartCtrl.start_dateSelected"
                        is-open="start_dt_opened"
                        max-date="today"
                        datepicker-options="dateOptions" 
                        date-disabled="disabled(date, mode)"
                        ng-required="true" 
                        ng-change='dateChanged()'
                        close-text="Close"
                        >
                    <span class="input-group-btn date">
                        <button type="button" 
                            class="btn btn-default" 
                            title="Start Date Picker"
                            ng-disabled="plotButtonActive"
                            ng-click="start_date($event)">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                    <input type="text" 
                        class="form-control"
                        placeholder="End Date"
                        title="End Date"
                        ng-disabled="plotButtonActive"
                        datepicker-popup="yyyy-MM-dd"
                        ng-model="chartCtrl.end_dateSelected" 
                        datepicker-popup=""
                        is-open="end_dt_opened"
                        max-date="today"
                        {# todo: set min/MAX date properly                                      #}
                        datepicker-options="dateOptions" 
                        date-disabled="disabled(date, mode)"
                        ng-required="true" 
                        ng-change='dateChanged()'
                        close-text="Close"
                        >
                    <span class="input-group-btn">
                        <button type="button" 
                            class="btn btn-default" 
                            title="End Date Picker"
                            ng-disabled="plotButtonActive"
                            ng-click="end_date($event)">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>

                    <button class="btn btn-default col-md-2"
                        ng-click="plotminus()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to pervious period">-</button> 
                    <button class="btn btn-default col-md-2"
                        ng-click="plot1day()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to last 24 hours/1 day">1 day</button>
                    <button class="btn btn-default col-md-2"
                        ng-click="plot7days()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to last 7 days">7 days</button>
                    <button class="btn btn-default col-md-2"
                        ng-click="plot30days()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to last 30 days">30 days</button>
                    <button class="btn btn-default col-md-2"
                        ng-click="plot60days()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to last 60 days">60 days</button>
                    <button class="btn btn-default pull-right col-md-2"
                        ng-click="plotplus()" 
                        ng-disabled="plotButtonActive"
                        title="Set range to next period"
                        >+</button> 

                </div>

以下是Chrome浏览器的外观： Properly laid out date inputs

以下是Firefox的外观： Firefox layout

我只是希望这对那里的人来说是一个熟悉的问题。

Answer 1

从span标记中取出元素，并根据需要设置输入宽度。请参阅小提琴：https://jsfiddle.net/DTcHh/19437/

Answer 2

对于记录，事实证明这个问题是由于:: before伪元素已经应用了display：table。删除后，Firefox会正确显示该行。

Firefox破坏了引导行显示

2 个答案: