IE CSS позиционирование проблема

У меня есть разметка для всплывающего меню, которое работает в firefox, но не IE. Проблема в том, что всплывающее окно появляется под другими элементами и невосприимчиво к значению z-index. Ниже приведен полный пример выполнения.IE CSS позиционирование проблема

Теперь я знаю, что одно исправление не должно позиционировать div как относительное, но я не могу этого сделать, потому что в реальном коде я использую scriptaculous, и он добавляет «position: relative», чтобы сделать что ему нужно делать. Кроме того, я не думаю, что это должно иметь значение.

Есть ли еще какое-то исправление, которое сделает этот код для IE и firefox?

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head><title>IE Problem</title> 
<style type="text/css"> 
.mydiv{ 
    position: relative; 
    background: yellow; 
    border: solid 1px black; 
} 
table{background:black;} 
td.menu{background:lightblue} 
table.menu 
{ 
    position:absolute; 
    visibility:hidden; 
    z-index:999; 
} 
</style> 
<script type="text/javascript"> 
function showmenu(elmnt){ 
    document.getElementById(elmnt).style.visibility="visible"; 
} 
function hidemenu(elmnt){ 
    document.getElementById(elmnt).style.visibility="hidden"; 
} 
</script> 
</head> 

<body> 
<div class="mydiv" onmouseover="showmenu('one')" onmouseout="hidemenu('one')"> 

    <a href="#">div one</a><br /> 
    <table class="menu" id="one" width="120"> 
    <tr><td class="menu"><a href="#">Item 1</a></td></tr> 
    <tr><td class="menu"><a href="#">Item 2</a></td></tr> 
    </table> 

</div> 
<div class="mydiv" onmouseover="showmenu('two')" onmouseout="hidemenu('two')"> 

    <a href="#">div two</a><br /> 
    <table class="menu" id="two" width="120"> 
    <tr><td class="menu"><a href="#">Item 1</a></td></tr> 
    <tr><td class="menu"><a href="#">Item 2</a></td></tr> 
    </table> 

</div> 
</body> 

</html>

источник

2008-11-23 dl__

Z-индекс ограничен внутри родительского элемента, если родительский элемент имеет положение: относительное или положение: абсолютное.

Решение для вашего примера - добавить style = "z-index: 2;" к первому «mydiv» и z-index: 1; ко второму.

источник

2008-11-23 21:52:10 Greg

Это ответ, с которым я пошел. Кажется, работает, хотя выпадающее меню немного мерцает под IE, когда я перемещаю мышь. – 2008-11-24 19:54:59

Если вы перемещаете ТАБЛИЦЫ за пределами DIVs он работает. Надеюсь, это удовлетворит ваши потребности? Думаю, я тоже смутился бы, если бы я был ДИВОМ, и ты попросил меня заказать Z-код, который я держу выше меня.

источник

2008-11-23 21:51:28

Проблема с этим, а не то, что вы могли бы знать, что это меню является частью div. Я использую scriptaculous, чтобы позволить divs перемещаться. Если кто-то перемещает divs, я хочу, чтобы меню было с ним. Я мог бы переместить меню, когда div зависнет. – 2008-11-23 22:27:55

IE CSS позиционирование проблема

ответ

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