У меня есть своего рода карта изображений, где я использовал li для создания элементов, и при наведении курсора информация всплывает. Код HTML:
<li id="b906" style="z-index: 1000;">
<a href="#">
<span> </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 промежутки отображаются, но только в том случае, если моя мышь находится точно на этой тонкой границе в 1 пиксель. Не отображается, если курсор находится внутри буквы li.
Что я здесь делаю не так? :( Спасибо за помощь.
<span class="para">
мне кажется абзацем ... почему бы просто не использовать<p>
? - person GWB   schedule 21.07.2010