Проблема CSS с Safari - визуализация ссылки внутри h1 с неприятным неровным подчеркиванием

Question

У меня есть что-то вроде

<h1>
  <a href="/" title="Home">Home</a>
</h1>

Очень просто. IE, FF рендерит это плавно, подчеркивание работает нормально. Safari делает эту странную вещь, которую я никогда раньше не видел, он подчеркивает «Домой» только там, где шрифты с засечками и кривыми НЕ касаются подчеркивания, то есть буква «H» будет подчеркивать между двумя «столбами» (звучит странно, я знаю), и там, где эти два касаются подчеркивания, последний становится намного светлее (#eee против # 000).

UPDATE: Очевидно, Safari плохо отображает ссылку, когда есть

 text-shadow: 0px 2px 1px #fff;

Есть ли для этого особая причина?

Answer 1

Причина в том, что тень текста отображается на переднем слое. Если бы я был тобой, я бы добавил border-bottom к элементу h1 a без подчеркивания текста.

 h1 a {
  text-decoration: none;
  border-bottom: 1px solid blue;
 }

Конечно, замените синий на любой цвет ваших ссылок.

Edit: понял, что тень может быть исправлена ​​с помощью тега span.

Я думаю, что наличие небольшого промежутка между подчеркиванием и базовой линией при использовании тени выглядит лучше, но если у вас должно быть text-decoration: underline, вам придется добавить элемент span в вашу разметку:

<a href="/" title="Home"><span>Home</span></a>

CSS:

 h1 a span {
  position: relative;
  top: 0px;
  z-index: -100;
 }