在开发过程中遇到了一个兼容性相关的问题，具体为在Firefox浏览器中，浏览器自带的账号密码自动补全功能显示异常将输入框挡住了，如下。
操作系统: macOS 10.15.7
浏览器: Firefox 91.0.2 (64 位)
原因为 Firefox 浏览器在 input 没有添加 autocomplete 属性的情况下也会调用自动补全的特性，由于该输入框的高度可能会变化，Firefox 的自动补全下拉框没有动态计算输入框位置导致位置异常。比较有意思的事，似乎夜间模式并不会有这个问题，第一次想要复现这个问题的时候因为是6pm之后我甚至都没有复现。最终，通过为该输入框加入 autoComplete="new-password" 属性以禁用自动补全功能来解决该问题。
autocomplete 属性
autocomplete 属性可用于以文本或数字值作为输入的 <input> 元素 ， <textarea> 元素， <select> 元素和 <form> 元素，用以告知浏览器该字段的期望类型并要求浏览器提供关于字段中所期望的信息类型的自动补全。建议值的来源由浏览器决定。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。
为了提供自动完成功能，可能需要 <input>/<select>/<textarea> 元素同时具有以下条件:
- 具有 name 和/或 id 属性
- 成为
<form>的后代 - form 需要含有
type="submit"的按钮
autoComplete 的值有很多种，其中，理论上设置 autoComplete="off" 可以禁止浏览器为此字段自动输入或选择一个值。但实际上，在大多数现代浏览器中， autocomplete 设置为 “off” 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 该文章 解释了原因并给出了取消自动补全的方案（即设置 autoComplete="new-password"）。
best practice
最佳实践是，最好在每个 input 输入框上都添加 name 和 autocomplete 属性以避免自动补全的问题，其中 name 标志含义，autocompelte 用来告知浏览器自动补全的类型（或禁止自动补全）。以下列出一些常用的 autocomplete 值供参考：
| 值 | 含义 |
|---|---|
| name | 该字段期望该值是一个人的全名(姓名) |
| 电子邮件地址 | |
| username | 用户名或帐户名 |
| new-password | 新密码。 创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段。实际上会禁止自动补全，但如果是 type="password" 类型的输入框，浏览器仍可能会给出建议的值 |
| one-time-code | 用于验证用户身份的一次性代码，比如短信验证码，邮箱验证码 |
| tel | 完整的电话号码，包括国家/地区代码 |
| url | URL，例如主页或公司网站地址 |
删除记录的过去值
当你输入一个错误的账号而且不小心提交了，虽然提交不会成功，但这个账号也会被浏览器记录下来，在下一次输入的时候显示在自动补全列表中。你可以使用以下方法删除这些值（在 macOS chrome96.0 中测试过是有效的，不一定对所有浏览器有效）。
首先用鼠标指针 hover 到你想删除的值。然后，如果使用的是 Windows 操作系统中可以用 shift + delete 键删除该值。在 macOS 操作系统中 可以使用 fn + shift + backspace 键删除该值。
