CSS-меню при наведении курсора исчезает в IE9 ... но показывает тень? - PullRequest
Новая
       38

CSS-меню при наведении курсора исчезает в IE9 ... но показывает тень?

2 голосов
/ 09 января 2012

После настройки нового меню CSS: hover оно отлично работает по всем направлениям ... за исключением IE (дох!). Вы увидите, что в IE9 содержимое меню полностью невидимо, но, как ни странно, оно все еще создает тень. Изображение ниже, сравнивая результат:

CSS menu shadow in IE9

Что я пробовал

Я испробовал два метода: 1) добавление прозрачного фона PNG, как сообщают некоторые, в качестве решения, и 2) добавление поведения Microsoft при наведении курсора (csshover.htc).

Код ниже 

.nav {}
.nav li {float: left; position: relative; z-index:10; }
.nav li.search-li {padding: 14px 8px 14px 5px; width:21px; height:26px;}
.nav .search-li ul {width:343px; text-align:center;}
.nav .search-li input[type="text"] {margin:0;padding:5px 10px; border:none; height:20px;font-size:16px;font-weight:bold;border-radius: 3px;}
.nav .search-li input[type="submit"] {padding:5px 10px; height:30px; border:none;background:#0066CC; color:#FFFFFF;font-size:16px;font-weight:bold;border-radius: 3px}
.nav li a { font-family:'LeagueGothicRegular'; margin: 4px 0 0 0; padding: 10px 13px 14px 10px; display: block; font-size:22px; color: #fff; text-transform: uppercase; text-shadow: 0px 1px 1px #444;}
.nav li:hover {
    background: #222222; /* Old browsers */
    background: -moz-linear-gradient(top, #45454E 0%, #222222 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45454E), color-stop(100%,#222222)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45454E 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45454E 0%,#222222 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45454E 0%,#222222 100%); /* IE10+ */
    background: linear-gradient(top, #45454E 0%,#222222 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    text-decoration: none;
    box-shadow: 5px 3px 5px #15151e;
}

.nav li ul {
    padding:16px 5px;
    display: none;
    position: absolute; 
    top: 53px; left: 0; z-index: 1000;
    background:#222222;
    -webkit-box-shadow: 5px 3px 5px #15151e;
    -moz-box-shadow: 5px 3px 5px #15151e;
    box-shadow: 5px 3px 5px #15151e;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-radius: 0px 6px 6px 6px;
    border-radius: 0px 6px 6px 6px;
} /* sub nav starts here */
.nav li:hover ul {display: inline-block;} /* suppport in ie7 and on */
.nav li li {float: none; display:inline-block; z-index:1001; background:url(images/transparent.png) #222222; }
.nav li li a {width: 135px; height: 19px; float:none; margin: 0; padding: 4px 12px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-transform:capitalize; }
.nav li li:hover {background:none; box-shadow: none; border-radius:none;}

Любые предложения или известные исправления приветствуются!

1 Ответ

4 голосов
/ 09 января 2012

OK. Мои подозрения верны. Проблема определенно с этой строкой:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */

Прокомментируйте это, и проблема исчезнет. Посмотрим, смогу ли я найти исправление, позволяющее сайту работать И градиент ...

...