IE7 ul дисплей: нет / проблема с блоком

Question

У меня странная проблема с IE7.Это мой HTML:

          <div class="nav square">
            <div>
              <ul>
                <li><a href="#square" class="square_lk">[b] square</a></li>
                <li><a href="#history" class="history_lk">[b] history</a></li>
              </ul>
            </div>
          </div>

Это мой CSS:

.nav ul { 
position: absolute; margin-top: -50px; top: 0; left: 0; width: 100px; font-size: 10px !important; background-color: rgb(159,55,32); 
display: none;}

и, наконец, это мой MooTools: <pre> var nav_divs = $$('.nav div');</p> <p>for(i=0; i <pre><code> nav_divs[i].onmouseover = function () { this.getElementsByTagName('ul')[0].style.display = 'block'; } nav_divs[i].onmouseout = function () { this.getElementsByTagName('ul')[0].style.display = 'none'; }

} Все в порядке в Firefox, Opera, Safari Chrome и IE8, но в IE7, когда я перехожу на div, ul не отображается.

Я пробовал также с простой функцией jQuery, но ошибка вIE7 все еще остается.

Заранее спасибо за любые предложения.

Answer 1

Я согласен, это не пузырящаяся проблема, скорее всего, это связано с CSS, который вы применяете к ul.

top: 0 и left: 0, это предназначено для абсолютного элемента? не знаю, если только ul не должен быть посеян в верхнем левом углу окна просмотра (а затем -50px через margin-top выше сделает его вне видимой области).

http://www.jsfiddle.net/uAAge/

Удаляя объявления top: и left: из класса css, можно работать как относительное всплывающее окно (протестировано в ie7, ff3 и chrome). если вам нужно сместить его сейчас, чтобы он лучше располагался вокруг элемента триггера, используйте вместо него marginTop и marginLeft.

Answer 2

Звучит как проблема с пузырями.

http://www.quirksmode.org/js/events_order.html

Answer 3

Вы даже не используете синтаксис MooTools. Если хотите, используйте mouseenter / mouseleave вместо mouseover / mouseout.

nav_divs.each(function(el){
  el.addEvents({
    mouseenter: function(){
      this.getElement('ul').setStyle('display', 'block');
    },
    mouseleave: function(){...}
  });
});

Answer 4

Попробуйте display = '' вместо display = 'block' или display = 'none'.