тег привязки с абсолютным позиционированием (без текста), не кликабельный в IE - PullRequest
70 голосов
/ 02 августа 2011

У меня есть два якоря, расположенные абсолютно поверх изображения, ссылки можно нажимать в других браузерах (Chrome, FF, Safari), но не в IE (до сих пор тестировалось в 8 и 9)

СтранноДело в том, что если я даю ссылки background-color, они активируются, однако, если background-color установлен на transparent (, что я и хочу ), они больше не активируются, я такжепопробовал установить zoom:1 но не повезло.Я предполагаю, что бит hasLayout в IE ушел с IE 8/9, поэтому предположение zoom не имеет значения для такого рода проблем.

Любые идеи, чтобы эти ссылки появлялись в IE 8 /9 с прозрачным bg?

Вот скрипка, с которой я работал: Пример jsFiddle

У меня есть следующий макет HTML:

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

и CSS:

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

Ответы [ 6 ]

70 голосов
/ 02 августа 2011

Раньше у меня была именно эта проблема, и она всегда меня раздражала.Я никогда не уверен, почему это происходит, но я всегда создаю прозрачный PNG (или GIF) размером 1 на 1 пиксель и использую его в объявлении фона следующим образом:

a { background: url("/path/to/image.png") 0 0 repeat; }

Надеюсь, это поможет.1005 * PS - Не указывайте фактический цвет фона с этим.Просто используйте приведенный выше пример, и он должен работать.

В дополнение к этому, попробуйте установить теги привязки для отображения в виде блока и, возможно, также вставить в них неразрывный пробел (так как в данный момент они пустыи это может привести к отключению IE):

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>
53 голосов
/ 11 мая 2012

Вы можете сделать это, используя упомянутый трюк background-image. Если вы не хотите использовать прозрачное изображение для этого, просто используйте неизвестную схему или about:blank в URL-адресе изображения.

a { background-image: url("iehack:///"); }

или

a { background-image: url("about:blank"); }

Это работает по крайней мере в IE 8 + 9 (единственные IE, которые я тестировал) и в текущих версиях Firefox и Chrome. Это все еще действующий CSS и не вызывает дополнительного трафика. Первый «взлом» может привести к ошибке JS в Chrome (и, возможно, других) при использовании jquery. Только последний (но обязательно) выдает предупреждение MIME-типа в Chrome из-за неправильного MIME-типа документа about:blank.

24 голосов
/ 11 октября 2013

Трансплантировано из комментария, который я опубликовал некоторое время назад.

Немного дольше, но по-прежнему нет трафика, прозрачный gif с кодировкой Base 64:

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

Это имеет свои плюсы / минусыно может быть полезным.Также:

background-color: rgba(0,0,0,0)

Я использовал это недавно

10 голосов
/ 02 августа 2011
Комментарий

@ tw16 с упоминанием invisible заставил меня задуматься о opacity.

Комбинация IE filter:alpha(opacity=0) с background-color:#fff (или любым цветом) кажется хорошим решением для этого. Протестировано и работает в IE 7-9 (6 почему-то не применяет фильтр непрозрачности, но я не обязан поддерживать 6, так что это будет работать)

Решение для изображения 1x1 имеет глобальный эффект, поэтому я собираюсь дать ему чек.

Спасибо за ответы.

3 голосов
/ 24 августа 2012

У меня была такая же проблема. Моим рабочим решением было добавить границу к соответствующему якору. Как в следующем примере. Одним из преимуществ является то, что вам не нужно дополнительное изображение.

a { border-right: 1px solid transparent }
2 голосов
/ 02 августа 2011

В IE есть неприятная привычка не давать ссылкам работать должным образом, если у них нет контента. Чтобы это исправить, дайте каждой ссылке &nbsp; для содержимого.

Еще одна попытка - установить display: block; для ссылок, чтобы IE передавал их как элементы уровня блока, а не как встроенные элементы. Это также может помочь, если вам нужны пустые ссылки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...