在表单（Firefox）中生成以下结果，可以:screenshot

但不知何故，一旦选择了一个值，日期输入字段就会以一种奇怪的方式混乱；查看:screenshot有趣的是，一旦视口调整大小，裁剪问题就会重置，这意味着存在某种呈现问题。

现在我四处查看日期字段发生了什么，最终检测到了来源： 一旦我从css中移除这一行，并继续使用默认的引导程序--蓝色高亮显示，一切都按预期进行--不再进行裁剪。

我发现，不知何故，在某个地方隐藏了一个8px的边框左和边框右设置，因为该设置不出现在元素检查器上，但可以在框值中清楚地看到这些值:screenshot before 有趣的是，当我再次将css重新添加并关注我的字段时，这些8px设置会发生变化:screenshot after

因为我没有编辑or参数上的任何内容，所以我无法理解发生了什么。我现在的建议是，以某种方式在后台静静地“重置”其他设置。在我看来，这听起来完全疯狂，但我甚至注意到，当：焦点被触发时，这肯定被覆盖了。查看以下内容（需要放大）:边框-半径未聚焦，边框-半径聚焦

在其他浏览器上测试

更新

我刚刚发现它删除了默认的基于chrome的：Focus行为，并使用了所需的css。这样，基于chrome的浏览器的行为至少现在与Firefox的行为相似，但在Firefox上，裁剪问题仍然存在。

原始

现在我不确定这是否可能是一个基于浏览器的问题，所以我检查了基于chrome的浏览器以及...看起来：焦点在这里是完全不同的东西，而不是点击进入字段！ 触发器：使用element inspector聚焦会给出预期的结果:基于屏幕截图检查器的触发器 但由于某种原因，简单地单击该字段只会“突出显示”它变暗： 手动单击屏幕截图 有趣的是，与Firefox相比，在此示例中可以看到更多的覆盖！

尽管我不明白为什么在基于chrome的浏览器中有两种不同类型的“聚焦”，但日期字段按预期工作，没有删除内容:抱歉，由于我没有足够的点，不得不删除此截图，但

结束

所以现在我完全糊涂了:

1. 为什么会像它在Firefox下的行为一样？有人遇到过这样的事情吗？
2. 为什么在基于chrome的浏览器上有不同的：焦点触发器，尽管GoogleChrome及其衍生产品都支持焦点？

我现在需要一些新鲜咖啡。感谢您的每一次回复！

示例代码

按要求，现在开始:

顺晟科技：

解决办法

所以我找不到此问题的根，但我至少找到了一个解决办法，添加了自定义默认边框设置:

这样，默认行为被覆盖，日期输入最终按预期工作。

但我仍然想知道默认情况下会发生什么？