Сафари CSS ссылка не работает

Question

У меня есть меню в стиле ul, похожее на это:

<ul>
  <li>
    <a href="/hem/"><span>Hem</span></a>
  </li>
  etc.. etc..
</ul>

Элемент li имеет изображение в качестве фона, которое изменяется при наведении курсора. Я не хочу отображать текст внутри контейнера, и поэтому он имеет видимость: скрытый.

Забавная вещь сейчас; Вы все еще можете нажать на ссылку в IE и FF, но в Safari работает только наведение мыши, но вы не можете нажать на ссылку. Изменение видимости контейнера span дает возможность перейти по ссылке.

Вопрос теперь в том, как изменить код CSS, чтобы он вел себя как IE и FF? Я не хочу показывать текст, но я хочу иметь возможность щелкнуть меню - дух!

Answer 1

Вместо того, чтобы устанавливать видимость привязки для скрытого, рассмотрите следующее:

ul li a
{
   display:block;
   width:100%;
   height:100%;
   text-indent: -9999px; // Hide the text
}

Рабочий пример