为什么与 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

正如泰勒在评论中提到的，这是由媒体查询引起的

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

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

To switch this feature off, go to about:config in Firefox and set either layout.css.prefixes.webkit or layout.css.prefixes.device-pixel-ratio-webkit to false . （这两者中的哪一个会起作用，似乎取决于 Firefox 的版本。）

Or if you don't want your users to go changing advanced settings in Firefox, you can undo the Bootstrap CSS by setting the line-height for those inputs back to normal in your own 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;
}