左边框在 Safari 中不起作用答案

【问题标题】：border-left not working in Safari左边框在 Safari 中不起作用
【发布时间】：2011-09-14 23:27:39
【问题描述】：

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

.cursor { 左边框：1px 纯红色；右边距：-1px；显示：内联；位置：相对； z-index：1； }

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

【问题讨论】：

你能对你正在做的事情做一个简单的解释吗？肯定支持border-left！
Safari 对左边框没有任何问题。发布更多代码或发布 JSFiddle。
@Sparky - 从代码的外观来看，我认为它是文本光标，而不是鼠标。
我和 Sparky 和 Rich 在这一个上——border-left 在 Safari 中工作得很好。你能发布一个完整的例子吗？您将样式应用于什么元素？我们需要标记和样式。
是的，它是文本光标。我已将代码发布到 JSFiddle link

【解决方案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 不会给你的跨度高度，因此没有边界。这是非常明智的行为，真的。

【讨论】：

谢谢。你说得对。我已经用更简单的东西进行了测试，它可以工作。我想这是我代码中其他地方的一些错误，但我还没有发现。我已经在这里发布了link
@chepukha 啊哈！比较了我们的代码，这就是区别——你的范围内没有任何东西。如果您在跨度中添加 anything at all，则边框会出现在 Safari 中（例如 <span class="cursor">&nbsp;</span> -- 添加一个不间断的空格 -- 使您的示例工作。）有趣！
@Matt Gibson 我在 Google Chrome 中发现了同样的问题；你打败了我。 :) 这不是错误；只是如果里面没有任何东西，Webkit 将（相当合理地）不给跨度任何宽度。没有宽度，就没有任何东西可以显示边框。
我认为 Safari 是正确的。无内容 => 零宽度/高度 => 无边框。并且 OP 应该将他的 HTML 与 CSS 一起发布。
@chepukha 我已经更新了我的答案——如果你给 span 一个明确的高度，那么你不需要做丑陋的解决方法。您可以尝试高度，但从您的示例的外观来看，1em 或类似的可能就是您所需要的。

【解决方案2】：

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

查看我刚刚在 Safari 5.0.2 上测试过的代码片段，它可以工作：

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

事实上，您提供的所有 css 标签 - 都在 Safari 1.0+ 中工作，除了 display 标签（它在 Safari 1.3.2+ 中工作）

【讨论】：

不，这在 Safari 上不起作用。我已经测试过了。假设我有。然后， $('#mySpan').addClass('cursor') 它会在 Firefox 中显示一个红色条，但在 Safari 中，我什么也得不到。
我认为 Dimitriy 是对的。为什么有人投票反对他？无论如何，这就是我在 JSFiddle 中所做的事情。有人可以指出我的错误吗？ jsfiddle.net/chepukha/aUegb/2谢谢
@chepukha：从左侧的“选择框架”中选择 jQuery。并且 setInterval 也接受静态函数名，用引号括起来。例如： var t = setInterval('myFunction()', 1000);并且 t 是一个处理程序，可用于 clearInterval(t);
@Dmitriy：谢谢，我已经修好了。这是我第一次使用 JSFiddle。它实际上就像我在 Firefox 中编写的那样工作，但在 Safari 5.0.5 中仍然无法工作。我会按照建议尝试使用静态函数名称。
@Dmitriy：Matt 指出了这个问题。顺便说一句 Safari 和 FF，它的行为略有不同。如果可以选择接受超过 1 个答案，我会接受您的答案 2。无论如何，非常感谢您的快速响应和热心帮助。真的很感激！