css - 左边框在 Safari 中不起作用

Question

我想通过向其添加以下类来模拟游标。

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

它在 Firefox 中工作得很好。但是，Safari 中没有显示任何内容。我一直在尝试许多不同的值(value)观。尽管 w3c 声称所有主要浏览器都支持它，但 Safari 似乎无法理解 border-left。
有人可以帮我解决这个问题吗？
谢谢，

Answer 1

使用您的确切代码，它对我来说似乎工作正常。我有 created a jsFiddle here ，它在 Safari 中显示一个红色的“插入符号”。

您是否遇到了某个特定的 Safari 版本？显示的 jsFiddle 是否适合您？它仅使用您提供的代码。

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

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

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

...就是给span加个高度，然后你的border显示有没有内容。因此，我想发生的事情是，如果没有内容，WebKit 不会为您的跨度提供高度，因此也没有边框。这是非常明智的行为，真的。

这里是 your original jsfiddle, with a height added, that works in Safari and Chrome .