IE8 не зависает при использовании li с position: absolute - PullRequest
Новая
       27

IE8 не зависает при использовании li с position: absolute

1 голос
/ 21 июля 2010

У меня есть своего рода карта изображений, где я использовал li для создания элементов, и при наведении курсора всплывает информация. HTML-код: 

<li id="b906" style="z-index: 1000;">
    <a href="#">
        <span>&nbsp;</span>
        <span class="para">Some text and maybe an image goes here.</span>
    </a>
</li>

И код CSS для соответствующего HTML: 

#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}

#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}

#map ul li:hover a {
display: block;
}

#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}

#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}

Это прекрасно работает во всех браузерах, но IE8 не показывает пролеты при наведении курсора. Однако если я поставлю границу: 1px сплошной красный; на li, пролеты действительно появляются, но только если моя мышь находится точно на этой тонкой границе в 1px. Не отображается до сих пор, если курсор внутри li.

Что я здесь не так делаю? :( Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 21 июля 2010

С http://msdn.microsoft.com/en-us/library/ms530766.aspx

Windows Internet Explorer 7 и более поздние версии в совместимом со стандартами режиме (строго! DOCTYPE) могут применять псевдокласс: hover к любому элементу, а не только к ссылкам. Если псевдокласс не применяется конкретно к элементу в селекторе, таком как тег A, предполагается универсальный (*) селектор. Неизбирательное использование псевдокласса: hover может отрицательно повлиять на производительность страницы.

См. Определение совместимости документов

0 голосов
/ 21 июля 2010

Internet Explorer имеет некоторые проблемы, связанные с: событиями наведения, особенно для элементов li.Вам нужно использовать это: http://www.xs4all.nl/~peterned/csshover.html

Должно работать на вас.Если ничего не помогает, и в моем случае я использую hoverIntent jQuery для надежного отображения меню.

...