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

У меня есть два якоря, расположенные абсолютно поверх изображения, ссылки можно нажимать в других браузерах (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;}
70 голосов | спросил MikeM 2 PM00000070000005131 2011, 19:49:51

6 ответов


0

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

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>
ответил Michael Giovanni Pumo 2 PM00000070000000531 2011, 19:54:05
0

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

ответил Dio F 11 Maypm12 2012, 23:17:46
0

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

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

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

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

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

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

ответил morewry 11 +04002013-10-11T01:26:12+04:00312013bEurope/MoscowFri, 11 Oct 2013 01:26:12 +0400 2013, 01:26:12
0
Комментарий

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

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

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

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

ответил MikeM 2 PM00000080000001931 2011, 20:33:19
0

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

a { border-right: 1px solid transparent }
ответил Jim 24 PM000000120000002231 2012, 12:33:22
0

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

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

ответил cdeszaq 2 PM00000070000001431 2011, 19:57:14

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132