子光标宽度垂直条在Safari输入/ textarea中始终可见

Question

在Safari 9.0.3,Mac OS X El Capitan中,在我的一个页面上,所有输入和textarea元素在聚焦时都表现出这种行为:元素左侧始终显示一个垂直条,宽度比输入的更薄光标.

当元素聚焦时,光标闪烁,即它开启和关闭.所以我为这两个截取了2个截图:

当光标打开时:

当光标关闭时:

正如您在光标关闭的第二张图像中所看到的那样,那里仍然有一个垂直条,当元素聚焦时它永远不会消失.

我试图通过在浏览器中逐个切换规则来追踪导致问题的CSS规则.事实证明,它是font-size.但问题是:只有当字体大小设置为特定值(在我的情况下为14px)时才会出现此问题.将字体大小设置为其他值会导致条形图消失.

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

有没有人见过这个？这是一个Safari bug吗？

Answer 1

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