左边框在 Safari 中不起作用

Question

我想通过添加以下类来模拟光标。

。光标 {
    左边框：1px 纯红色；
    右边距：-1px；
    显示方式：内嵌；
    位置：相对；
    z 索引：1；
}

它在 Firefox 中运行得非常好。但是，Safari 中没有显示任何内容。我一直在尝试许多不同的价值观。尽管 w3c 声称所有主流浏览器都支持 border-left，但 Safari 似乎并不理解 border-left。
有人可以帮我解决这个问题吗？
谢谢，

Answer 1

使用您的确切代码，它似乎对我来说工作得很好。我在这里创建了一个 jsFiddle，它在 Safari 中显示红色“插入符号”。

您是否遇到了特定 Safari 版本的问题？显示的 jsFiddle 对您有用吗？它仅使用您提供的代码。

经过进一步调查，似乎跨度必须有内容才能显示边界。我不确定到底为什么——也许 Safari 正在“优化”空跨度，或者给它零高度，或者类似的东西。

这似乎是一个 WebKit 问题，因为 Chrome 中也会出现相同的行为。作为解决方法，如果您在跨度上设置高度，它似乎可以工作。如果我将你的 CSS 更改为：

.cursor {
    border-left: solid 1px red;
    margin-right: -1px;
    display: block;
    position: relative;
    z-index: 1;
    height: 1em;
}

...也就是说，为跨度添加高度，然后您的边框显示它是否有内容。因此我猜想发生的事情是，如果没有内容，WebKit 不会给你的跨度提供高度，因此也没有边框。这确实是完全明智的行为。

这是您原来的 jsfiddle，添加了高度，适用于 Safari 和 Chrome。