#html #css #internet-explorer-7
#HTML #css #internet-explorer-7
Вопрос:
Кажется, я столкнулся со странной проблемой с IE7.
Если вы перейдете по следующему URL-адресу, http://tinyurl.com/3qrbhn4 , и наведите указатель мыши на основную навигацию вверху, прямо над изображением заголовка в Chrome, Firefox и IE8, вспомогательная навигация, которая отображается при наведении курсора мыши на элемент навигации (например, при наведении курсора мыши на собрания), кажется, правильно совпадает с родительской ЛИ. Однако, если вы попытаетесь навести курсор мыши на основную навигацию в IE7, субнавигатор появится на расстоянии одного пикселя.
Если вы проверите вложенный UL, который является #mainNav ul ul, вы заметите, что он расположен абсолютно внутри родительского UL с левым значением 0.
Однако, если я присвою ему значение left, равное left:1px, оно правильно выстраивается в IE7, но ломается в Chrome / FF / IE8.
Я не уверен, почему это происходит, и в настоящее время у меня есть родительский UL (#mainNav ul), расположенный относительно, поэтому я не уверен, почему будет разница в том, как IE7 отображает UL subnav. Я знаю, что могу «исправить» это с помощью взлома IE и просто заставить IE7 отображать ul subnav с левым значением 1px, но я бы хотел избежать этого маршрута, если это возможно.
Кто-нибудь может помочь? Пожалуйста, дайте мне знать, если я предоставил достаточно информации! Я перечисляю CSS для рассматриваемых элементов навигации:
/* NAVIGATION *********************************************************************************************** */
#mainNav { position: relative; width: 951px; margin: 0 auto; padding: 15px 0; z-index: 3; }
#mainNav ul { line-height: 100%; height: 35px; margin: 0; padding: 0; font-size: 20px; width: 951px; }
#mainNav ul li { line-height: 100%; list-style: none; float: left; text-transform: uppercase; height: 100%; position: relative; display: block; }
#mainNav ul li a { line-height: 0; height: 22px; border: 1px solid transparent; text-decoration: none; padding: 7px 15px 5px; position:relative; display: block; }
#mainNav ul li a:hover { }
#mainNav ul li.hover a { }
#mainNav ul li a.current { }
#mainNav ul li.lastItem { }
#mainNav ul ul { display: none; z-index:2; position: absolute; top: 35px; left: 0px; padding: 5px 0 10px; width: 200px; height: auto; -moz-box-shadow: 3px 3px 3px #444; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); }
#mainNav ul li.current ul { left: 1px; }
#mainNav ul li.hover ul li { background-position: 10px 8px; background-repeat: no-repeat; }
#mainNav ul li.hover ul li.hover { background-color: #baceda; background-position: 10px -20px; }
#mainNav ul li ul li { float: none; }
#mainNav ul li ul li a { background: none; line-height: 1; font-size: 15px; padding: 3px 30px 0; }
#mainNav ul li ul li.hover a { }
#mainNav ul li ul li a.current { }
Комментарии:
1. Сколько стоит ваше время? Просто используйте взлом IE7 и покончите с этим.
2. Конечно, я мог бы пойти по пути взлома, но мне бы очень хотелось разобраться в том, что здесь происходит, на случай, если в будущем я столкнусь с более серьезной проблемой.
3. IE7 сейчас используется менее чем на 5% по всему миру. В будущем она будет еще меньше.
4. Поверьте мне, я мечтаю о том дне, когда компания, в которой я работаю, поймет это. На данный момент это все еще браузер, который мы поддерживаем.
Ответ №1:
Попробуйте изменить #mainNav ul ul с left:1px на left:auto .
Комментарии:
1. Спасибо, @motoxer4533, но, похоже, это не сработало. Мы с другом смогли точно определить проблему. Похоже, что к #mainNav ul li a была добавлена граница размером 1 пиксель, которая добавляла пиксель пространства. Я просто установил границу на border:none и изменил свой #mainNav ul на top:34px вместо этого. Теперь это работает. Спасибо всем!