Абсолютный позиционированный тег привязки (без текста), не изменяемый в IE

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

Странная вещь, если я даю ссылки a 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="#" onclick="location.href='http://www.stackoverflow.com'; return false;" title="link1"></a>
    <a id="link2" href="#" onclick="location.href='http://www.stackoverflow.com'; return false;" 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;}

Ответы

Ответ 1

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

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

Надеюсь, что это поможет.

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

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

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

<a href="#">&nbsp;</a>

Ответ 2

Вы можете сделать это, используя упомянутый трюк 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.

Ответ 3

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

Дольше, но все равно нет трафика, base 64 закодирован прозрачным gif:

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

У этого есть свои плюсы и минусы, но может быть полезным. Также:

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

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

Ответ 4

@tw16 комментарий, упоминающий invisible, заставлял меня думать о opacity.

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

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

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

Ответ 5

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

a { border-right: 1px solid transparent }

Ответ 6

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

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