Меню дрожит при наведении в IE7. У Вас есть проблема? - PullRequest
Новая
       28

Меню дрожит при наведении в IE7. У Вас есть проблема?

0 голосов
/ 03 ноября 2011

Когда я тестирую в IE7, меню дрожит при первом наведении мыши и слегка меняет положение. Кроме того, при наведении курсора на элемент меню, который содержит подменю, меню снова дрожит. Я думаю, что обе проблемы имеют отношение к IE7 hasLayout, но я не уверен.

JSFiddle

Есть ли способ обеспечить hasLayout в css для IE7 в моем меню и тегах подменю? Или есть текстовые узлы, вставляемые как-то в IE7? Спасибо за вашу помощь.

1 Ответ

1 голос
/ 05 ноября 2011

Действительно, вы правы. Кажется, это hasLayout проблема с IE7 .

Я изменил свойства CSS. 

#nav {
    margin: 70px 0px 0px -15px;
    padding: 0px;
    list-style: none;
    font-size: 14px;
    position: relative;
}

#nav li a {
    display: inline-block; /* changed it to inline-block for IE compatibility */
    width: 195px; /* declared width since it's now inline-block */
    padding: 0 0 0 15px; /* total width 210px with padding */
    text-decoration: none;
    line-height:20px; /* vertical center with line-height instead */
    color: #262626;
    height: 20px;
}

.subnav {
    margin: -26px 0 0 ;
    padding: 0;
    list-style: none;
    position: absolute;
    display: none;
    left:196px;
    background: #201d1e;
    width: 325px;
}

/* same idea as (#nav li a) */
.subnav a {
    display: inline-block;
    color: #fff !important;
    padding: 0 0 0 15px;
    width: 310px;
    line-height:20px;
    height: 20px;
}

В подменю отображается на несколько пикселей больше, чем в современных браузерах, но -26px в .subnav можно настроить с помощью таблицы стилей IE7. Я думаю, что это близко к margin-top: -10px для IE7. Надеюсь, это сработает.

http://jsfiddle.net/marioluevanos/VAuYx/11/

...