引导输入组内数字输入的溢出宽度

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中，因此可能会在将来的版本中修复。