Ширина переполнения для ввода номера внутри группы ввода начальной загрузки

Question

Чтобы использовать входной аддон в twitter bootstrap (метка до/после ввода), вход должен быть добавлен внутри .input-group. Он отлично работает при использовании большинства типов ввода, но не в случае цифровых входов в Firefox. Группа ввода переполняет ее родительскую ширину, когда родитель слишком узкий. Эта проблема кажется только в Firefox.

.content { 
 
    padding: 20px; 
 
    width: 250px; 
 
} 
 
.form-group { 
 
    background: grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="content"> 
 

 
    <div class="form-group"> 
 
    <label for="exampleInputAmount">Amount (in dollars)</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">$</div> 
 
     <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="number"> 
 
     <div class="input-group-addon">.00</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="exampleInputAmount">Amount (in dollars)</label> 
 
    <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="number"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="exampleInputAmount">Amount (in dollars)</label> 
 
    <div class="input-group"> 
 
     <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text"> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="exampleInputAmount">Amount (in dollars)</label> 
 
    <div class="input-group"> 
 
     <div class="input-group-addon">$</div> 
 
     <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text"> 
 
     <div class="input-group-addon">.00</div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

Я обнаружил, что эта проблема существует только в Firefox Developer Edition, так что, вероятно, будет исправлено в будущих версиях.