border-left在Safari中不起作用

Question

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

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

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

Answer 1

使用您的确切代码似乎对我很好。我created a jsFiddle here，在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没有给你的跨度任何高度，因此没有边框。这真的是非常明智的行为。

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

Answer 2

border-left 样式适用于safari v1.0 +

请参阅我的代码剪切，我刚刚在Safari 5.0.2上进行了测试，但它确实有效：

http://jsfiddle.net/DqhfJ/1/

实际上你提供的所有css标签 - 在Safari 1.0+中工作，除了显示标签（它在Safari 1.3.2 +中有效）