Question

I want to use to simulate a cursor by adding the following class to it.

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

It works perfectly fine in Firefox. However, nothing is shown in Safari. I’ve been trying many different values. It seems like border-left is not understood by Safari although w3c claims that it’s supported by all major browsers.
Can someone please help me fix this problem?
Thanks,

Answer 1

It seems to work fine for me, using your exact code. I’ve created a jsFiddle here, which displays a red “caret” in Safari.

Is there a particular Safari version you’re having problems with? Does the jsFiddle shown work for you? It uses only the code you’ve provided.

On further investigation, it seems that the span must have content in order to show the border. I’m not sure exactly why — perhaps Safari is “optimising out” the empty span, or giving it zero height, or something like that.

This appears to be a WebKit issue, as the same behaviour occurs in Chrome. As a workaround, if you set a height on the span, it seems to work. If I change your CSS to:

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

…that is, adding a height to the span, then your border displays whether or not it has content. Therefore I guess what’s going on is that without content, WebKit is giving no height to your span, and therefore no border. Which is perfectly sensible behaviour, really.

Here is your original jsfiddle, with a height added, that works in Safari and Chrome.