为什么与 Chrome 相比，Firefox 中的 Bootstrap 3 日期输入看起来不同？

Question

有谁知道为什么在 Mozilla Firefox（版本 69.0.1）和 Google Chrome（版本 77.0.3865.120）中 Bootstrap 3 日期选择器输入的外观有所不同？

是否可以修复外观，如果可以，我该如何解决？问题是该值试图坚持在 Firefox 中任何给定日期输入的底部。

在谷歌浏览器中：

在 Mozilla Firefox 中：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label for="sampleInput">Sample input</label>
        <input type="date" class="form-control" id="sampleInput" placeholder="">
      </div>
    </div>
  </div>
</div>

JSFiddle

Answer 1

正如 Tyler 在 cmets 中提到的，这是由媒体查询引起的

@media screen and (-webkit-min-device-pixel-ratio: 0)

在 bootstrap.min.css 中。这有 -webkit- 前缀，因此它被设计为仅在基于 Webkit 的浏览器中使用，但问题是 Firefox 有一个设置使其也处理 -webkit- 前缀，这导致了这个问题。

要关闭此功能，请转到 Firefox 中的 about:config 并设置 layout.css.prefixes.webkit 或 layout.css.prefixes。 device-pixel-ratio-webkit 为 false。 （这两个中的哪一个会起作用，似乎取决于 Firefox 的版本。）

或者，如果您不希望您的用户在 Firefox 中更改高级设置，您可以通过在您自己的 CSS 中将这些输入的 line-height 设置回 normal 来撤消 Bootstrap CSS。

input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control {
  line-height:normal;
}