将鼠标悬停在 Chrome 字段建议上会缩小输入

我正在使用最新版本的 Chrome (74.0.3729.169)，并注意到一些有点令人沮丧/有趣的事情。

在下面的示例中，开始输入您之前使用过的电子邮件地址。 Chrome 的建议出现后，将鼠标悬停在其中一项建议上。请注意输入的缩减程度如何。

input { padding: 5px; border: 1px solid #ccc; }

<input id="email" name="email" type="text" placeholder="Email">

如果这不能重新创建该行为，我深表歉意，但是我现在已经能够在多台计算机上使用此代码片段重新创建它，所以我相当有信心这应该可行。

另外（这里稍微深入一下 Meta）在 StackOverflow 自己的登录屏幕上有一个相当戏剧性的例子，其中整个表单因此缩小。

比较下面两幅图像的宽度。或者，在第二张图像中，将“建议”的宽度与其对应的输入进行比较。

通过检查输入本身，我没有看到任何可以解释这种行为的新样式。似乎与以下无关padding或者，作为输入而无需padding仍然表现出这种行为。

我的问题有两个：为什么将鼠标悬停在建议上会导致输入缩小, and, 有没有一种方法/解决方法可以防止这种情况，以外固定宽度或完全禁用建议？

（我认为这两种解决方法都是有条件的。在某些情况下，您可能不想出于样式目的指定输入宽度，并且禁用建议似乎过多并且对用户体验有害）

或者也许是某个地方的 Chromium 错误票（我搜索没有成功 - 谷歌搜索与 Chrome 的自动填充/自动完成相关的任何内容都是一堆与安全性无关的文章）？

您所面临的问题与:-webkit-autofill伪类，通过自动完成功能将一些默认样式应用于输入。

当元素的值由浏览器自动填充时， :-webkit-autofill CSS 伪类会匹配。

不幸的是，我无法找到这些样式的确切定义位置，但这里有一个示例来确认这一点。如果您尝试使用相同的宽度值，您将避免收缩效果：

:-webkit-autofill {
  width: 173px;
}

<input id="email" name="email" type="text" placeholder="Email">

在上面的链接中您还可以阅读：

注意：许多浏览器的用户代理样式表使用!important在他们的:-webkit-autofill样式声明，使它们无法被网页覆盖，而无需诉诸 JavaScript hack。

所以即使有!important您将无法覆盖某些样式：

:-webkit-autofill {
  width: 173px;
  background:red!important; /* will not work*/
  border:2px solid blue;
  margin-left:150px;
}

<input id="email" name="email" type="text" placeholder="Email">

对于宽度问题，我想唯一的方法是像我尝试过的那样定义显式宽度auto, initial, unset等，但它们不工作。

如果你无法设置宽度而你想要默认的宽度，你可以考虑用JS来做到这一点：

document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";

<input id="email" name="email" type="text" placeholder="Email">