IE не уважая: парить на элементе

Работа на следующем веб-сайте: http://cetcolor.com IE не уважая: парить на элементе

топовый графический с «Read About It» кнопка имеет позиционируемый связь с парении, что, когда перевернулась отображает кнопку оранжевый графики и является интерактивная ссылка.

Однако в браузерах IE он не работает.

Вот пораженный HTML:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div>

А вот ссылка CSS:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
}

Кто-нибудь есть какие-либо идеи, почему парения не работает в IE браузерах?

источник

2012-03-22 Yazmin

Одной из причин может быть то, что у вас есть пустая ссылка. Попробуйте вставить в него некоторый текст и сделайте 'text-indent: -9999px', чтобы переместить его. – easwee

Я думаю, вы правы, что проблема связана с пустой ссылкой. Когда я добавляю контент в ссылку, он работает. Когда я добавляю текст-отступ к первой декларации выше, он перестает работать. Не уверен, что с этим делать ... – Yazmin

У меня есть решение для вас. Просто определите фоновый цвет или фоновое изображение для вашего класса read_about_it.

Существует очевидная логическая ошибка в коде CSS/или в IE - зависит от точки зрения. Ваш тег A пуст - я не имею в виду текст, но фон (вы меняете фон в состоянии зависания). Мы все знаем, что IE живет в своем собственном мире и обрабатывает HTML по-разному, потому что использует старый движок Trident. Однако IE не изменит фон при наведении, если элемент пуст (не имеет фона), потому что IE предполагает, что нет необходимости в изменении или создании чего-то, что еще не существует.
Приветствия!

источник

2012-03-22 16:35:57

Мне удалось получить эту работу, добавив прозрачный gif на задний план. Огромное спасибо. – Yazmin

Добро пожаловать! Очень неплохо использовать трансперант gif. –

Если вы используете IE6 не поддерживает: парить на каких-либо элементов, кроме

<a>

Я получил вокруг него с помощью JavaScript

onmouseover 
onmouseout

события.

источник

2012-03-22 16:10:13

Неправда. IE поддерживает ': hover' для всех элементов. IE6 не поддерживает ': hover' для любого элемента, кроме тега' '. Все версии выше, чем поддержка IE6: хорошо наведите курсор мыши. – easwee

Спасибо easwee за разъяснение. Я обновил свои формулировки. –

Добавить "display: block;" к нему, и он должен сработать для вас.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

источник

2012-03-22 16:11:31

Я пробовал это, но это не сработало. Является ли этот режим конкретным - стандартным, свободным? – Yazmin

"дисплей: встроенный блок;" также работал - спасибо. – buffjape

У меня такая же проблема, и я имею решить эту проблему с помощью:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

"фону: RGBA (255, 255, 255, 0)" является ключевым словом, чтобы решить эту проблему. Но вы хотите, чтобы IE-7 или старше вы могли поместить background-image: url (URL_TO_TRANSPARENT_IMAGE).

источник

2013-06-05 14:25:10

IE не уважая: парить на элементе

ответ

Смежные вопросы