border dashed и рваный dash. Как управлять первым dash'ем

Question

[Daniel Newman]

Вот, собственно вопрос:

border-bottom: Xpx dashed #f00

Есть ли возможность сделать первый dash не рваным и чем вообще это определяется?

Comments

[Daniel Newman]

jsfiddle.net/uWfp3/2/

Answer 1

[Softlink]

Как победить эту проблему не знаю, но как альтернатива — это градиенты jsfiddle.net/yyHNp/5/

Comments

[Daniel Newman]

Классно. Лишь бы не «дорого». В плане нагрузки на фронт, длиннее css, совместимость. В основном нагрузка на фронт смущает. Если успею — попробую померить. Спасибо!

Answer 2

[Andrey]

Проверил сейчас один из наших проектов, где мы тоже использовали такой способ подчёркивания. Рваный dash наблюдается только в Chrome. В IE, FF, Opera, Safari всё нормально, первый dash имеет полноценную длину. Так что, видимо, от браузера зависит.

Comments

[Daniel Newman]

Могу прислать скрины FF. Поиграйтесь размером более 3px на словах с буквы С/Ф

[Andrey]

Вот посмотрите, как это в моём случае выглядит:

[Daniel Newman]

jsfiddle.net/uWfp3/2/

[Andrey]

Забавно. Если бы не ваш вопрос — я бы никогда и не задумался/не заметил этих рваных dash'ей :)