в Сафари не работает граница

Question

Я хочу использовать для имитации курсора, добавив к нему следующий класс.

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

Прекрасно работает в Firefox.Однако в Safari ничего не отображается.Я пробовал много разных ценностей.Похоже, что border-left не понимает Safari, хотя w3c утверждает, что он поддерживается всеми основными браузерами.
Может кто-нибудь помочь мне решить эту проблему?

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 .

Answer 2

border-left стиль работает в Safari v1.0 +

Посмотрите на мой код, который я только что протестировал на Safari 5.0.2, и он заработал:

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

фактически все предоставленные вами теги css - работают в Safari 1.0+, кроме отображают тег (работает в Safari 1.3.2 +)