為什么與 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;
}