Почему IE7 неправильно отображает этот абсолютно позиционированный элемент? - PullRequest
Новая
       18

Почему IE7 неправильно отображает этот абсолютно позиционированный элемент?

0 голосов
/ 02 августа 2011

Существует множество вопросов и сообщений на форуме, касающихся поведения IE7 с абсолютно позиционированными элементами. Из десятка или около того, что я прочитал, ни один из советов, содержащихся в них, не помог в моей конкретной ситуации. Я начинаю удивляться, если это потому, что я использую HTML5 Shiv. Несмотря на это, я надеюсь, что кто-то может иметь некоторое представление о поведении, которое я вижу.

Firefox 5, Safari 5, Chrome 12, IE8 / 9 The correct rendering

Internet Explorer 7 The incorrect rendering

Короче говоря, при наведении курсора мыши на один из пунктов меню навигации, он опускает div с расширенным меню, yadda yadda yadda ... Скрытый div расположен абсолютно, однако в IE7 он привязывается к краю меню пункт, который вы выделяете Везде, где-то, он отображается под ним, правильно.

Я использую реми HTML5 shiv. Я включил CSS, чтобы «заблокировать» следующие элементы: header, nav, article, footer, section, aside, figure и figcaption.

Вот соответствующие HTML и CSS: 

<nav>
   //other nav divs
   <div id="kb">
      <a href="/kb/"><span>knowledge base</span></a>
      <div id="kb_expand" class="nav_expand">
         <div>
            //more options...
            <section>
               <h2><a href="">Exchange</a></h2>
               <ul>
                  <li><a href="">Exchange Setup</a></li>
                  <li><a href="">Calendar Basics</a></li>
                  <li><a href="">Calendar Sharing</a></li>
                  <li><a href="">Resources</a></li>
               </ul>
            </section>
            //more options...
         </div>
      </div>
   </div>
   //other nav divs
 </nav>


nav{float:right;margin-top:-26px;text-align:right;width:945px;padding:9px 0 10px}
nav > div{display:inline;padding:8px 0 11px}
.nav_expand{display:none;position:absolute;background:url('images/shadow-south.png') repeat-x bottom;padding-bottom:7px}
.nav_expand div{text-align:left;background:url('images/nav-background.png') repeat-y;width:925px;padding:5px 10px 10px;color:#FFF;margin-top:10px;overflow:hidden}

Я ценю любые идеи, которые кто-либо может предоставить! Спасибо!

Ответы [ 3 ]

2 голосов
/ 18 апреля 2012

Мы решили отказаться от поддержки Internet Explorer 7. В IE7 есть ошибка абсолютной позиции, которую не стоит исправлять для нашей доли посетителей на рынке.

0 голосов
/ 27 марта 2012

Эй, у меня было нечто похожее на то, что вы описываете, мне потребовались часы, чтобы понять это, и в конце концов, я не знаю, почему это вызовет проблему, но я подозреваю, что это ошибка, а не функция.У меня было text-align: right; на моем первом уровне ul и затем text-align: left; на втором уровне.Удаление с первого уровня решило проблему.Чтобы добиться того же эффекта (так как якоря отображаются как блоки), я просто помещаю выравнивание текста на привязку вместо ul.

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

0 голосов
/ 02 августа 2011

Я думаю, что у меня была такая же проблема несколько недель назад, которая сводила меня с ума.

Я гуглил position absolute ie7, что-то вроде этого, и пытался сделать все position:absolute до position:relative и подправитьmargin-right -left -top -bottom - не сработало.

Тогда я возился с z-индексом, тоже безрезультатно.

Мое решение состояло в том, чтобы придать каждому элементу стиль position:absolute.Моя проблема была с некоторыми div в верхней части карты Google.A position:absolute;top:0;left:0;width:100%;height:100% сделал свое дело.К счастью, я не зависел от того, какой из элементов div относителен, но я ДУМАЮ!это должно быть возможно с некоторыми JS (не просто getElementById ('style)', это то же самое, но что-то layers.pos.)

Лучше всего было бы попытаться дать вашему кб position:absolute, а затем немного поищите.

Попробуйте поискать в Google z-index ie7 position absolute bug.

Если заметить, если вы не знакомы с этим, http://crossbrowsertesting.com/ - настоящая находка для автоматических снимков экрана.и даже живой VNC для тестирования вашего сайта в любой комбинации браузера и операционной системы.У них есть бесплатная пробная версия, хорошо для хотя бы нескольких пробных запусков.Также Firebug отлично подходит для тестирования изменений стиля на лету без фактического изменения файла.

...