子光标宽度垂直条在 Safari 输入/文本区域中始终可见

Posted 2023-03-06

【中文标题】子光标宽度垂直条在 Safari 输入/文本区域中始终可见

【英文标题】：Sub-cursor width vertical bar constantly visible in Safari input/textarea

【发布时间】：2016-05-25 23:04:19

【问题描述】：

在 Safari 9.0.3、Mac OS X El Capitan 中，在我的一个页面上，所有 input 和 textarea 元素在聚焦时都会表现出这种行为：元素左侧始终可见一个垂直条，其中比输入光标窄的宽度。

当元素获得焦点时，光标会闪烁，即它会打开和关闭。所以我为两者截取了 2 张截图：

当光标打开时：

当光标关闭时：

正如您在第二张图片中看到光标关闭的地方，那里仍然有一个垂直条，当元素被聚焦时它永远不会消失。

我试图通过在浏览器中一一切换规则来找出导致问题的 CSS 规则。原来是字体大小。但问题是：仅当字体大小设置为特定值（在我的情况下为 14px）时才会发生此问题。将字体大小设置为其他值会导致栏消失。

这在任何其他主流浏览器中都不会发生。

还有其他人看过吗？这是 Safari 的错误吗？

【参考方案1】：

我在 Safari 10.1.2 中遇到了类似的问题。当我单击输入字段，然后单击其他位置以使该字段为空且失焦时，该栏仍然存在。您设置字体大小的解决方案不起作用，但在我的情况下，text-align: center;rule 应用于输入元素是原因。切换到text-align: left; 后一切正常。