Firefoxマングローブブートストラップ行表示

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タグから要素を取り出し、必要に応じて入力幅を設定します。 fiddleを参照してください：https://jsfiddle.net/DTcHh/19437/

Answer 2

この問題は、display：tableが適用された:: before擬似要素が原因であることが判明しました。これを削除すると、Firefoxは行を適切に表示します。