Html 为什么Bootstrap 3日期输入在Firefox中与Chrome中看起来不同？

有人知道为什么Mozilla Firefox（从69.0.1版开始）和Google Chrome（77.0.3865.120版）中的Bootstrap 3日期选择器输入的外观会有区别吗

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

在Google Chrome中：

在Mozilla Firefox中：

样本输入

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

@媒体屏幕和（-webkit最小设备像素比：0）

在bootstrap.min.css中。它有

-webkit-

前缀，因此它被设计为仅在基于webkit的浏览器中使用，但问题是Firefox的设置使它也处理

-webkit-

前缀，这导致了这个问题

要关闭此功能，请在Firefox中转到关于：config，并将布局.css.prefixes.webkit或布局.css.prefixes.device pixel ratio webkit设置为false。（这两个版本中的哪一个有效，似乎取决于Firefox的版本。）

或者，如果您不想让用户在Firefox中更改高级设置，您可以通过在自己的CSS中将这些输入的行高度设置回

normal

来撤消引导CSS

input[type=date]。表单控件，input[type=datetime local]。表单控件，input[type=month]。表单控件，input[type=time]。表单控件{
线高：正常；
}

它似乎是由内联样式的媒体查询（

@媒体屏幕和（-webkit最小设备像素比：0）{}

）中的

行高：34px

设置的。这看起来是Firefox中的一个bug，因为该部分的评论提到它只适用于iOS Mobile Safari。我的巴德找到了解决问题的方法。但是如果用户不知道这个问题怎么办？我需要代码使应用程序仍然正确可见，即使它们的设置不同？我现在不需要指示/要求我的应用程序的用户打开某些浏览器设置，是吗？好吧，你可以将行高度重置为

正常值

，然后可能使用一些填充，使其在所有浏览器中都符合你的要求。这也是我在解决方案中发现的。我还查看了您上面描述的设置，显然没有前缀.webkit的记录；显然，不同版本的Firefox有不同的设置。layout.css.prefixes.webkit在FF 60ESR的机器上工作，但对于FF 71每晚，我需要更改layout.css.prefixes.device-pixel-ratio-webkit。我现在更新了我的答案。