Question

我正在使用最新版本的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的输入仍然可以证明这种行为。

我的问题有两个方面：为什么将建议悬停在提示上会导致输入缩小，并且是否有防止这种情况的方法/替代方法，不是固定宽度还是完全禁用建议？

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

或者某个地方的Chromium错误票证（我没有运气进行过搜索-搜索与Chrome浏览器的自动填充/自动填充相关的内容都是关于安全性的无关文章）？

Answer 1

您面临的情况与:-webkit-autofill伪类有关，该伪类将一些默认样式应用于具有自动完成功能的输入。

：-webkit-autofill CSS伪类在元素的值由浏览器自动填充时匹配。

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

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

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

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

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

因此，即使使用!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等，但它们没有用。 / p>

如果您无法设置宽度，但想要默认宽度，则可以考虑使用JS：

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

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

Answer 2

如果您在谈论自动填充，则可能是Cookie被保存在浏览器中。