Internet Explorer Mouseenter возможная ошибка

Question

Я в настоящее время в недоумении с этой конкретной проблемой HTML / CSS. У меня есть карусель, которая имеет два абсолютно расположенных элемента li с каждой стороны, чтобы обеспечить навигацию (предыдущее изображение / и следующее изображение). Эти два элемента li отображаются правильно во всех браузерах, кроме всех версий IE (7-9), однако в IE элементы li отображаются за основным элементом, даже если я даю им z-index.

Я, наверное, что-то упустил, так как это был конец дня, и я очень устал, но я не могу понять, почему это так.

Что делает эту проблему еще более странной, так это то, что элементы li отображаются правильно, если я дам им фон! Как только я даю им цвет фона, они появляются перед элементом

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

Пожалуйста, игнорируйте значения непрозрачности и отображаемые значения, они изменяются с помощью jQuery. Они совершенно не имеют значения.

HTML:

<header id="carousel">
    <div id="carousel-holder">
        <div id="carousel-canvas" style="width: 2364px; ">
            <figure id="more-business" class="">
                <img>
            </figure>
            <figure id="more-money" class="active">
                <img>
            </figure>
        </div>
    </div>
    <nav>
        <ul id="arrow-nav">
            <li id="carousel-arrow-previous"><a href="#previous" title="Previous" class="sprite">Previous</a></li>
            <li id="carousel-arrow-next"><a href="#next" title="Next" class="sprite">Next</a></li>
        </ul>
    </nav>
</header>

CSS:

header#carousel {position:relative;width:790px;height:275px;margin:10px auto 0;padding:0;overflow:hidden;}
header#carousel div#carousel-holder {width:788px;height:250px;background:#fff;border:1px solid #999;border-radius:10px;margin:auto;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas {position:static;height:250px;}
header#carousel div#carousel-canvas figure {display:block;position:static;float:left;width:788px;height:250px;border-radius:10px;margin:0;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas figure img {width:788px;height:250px;}

header#carousel nav ul#arrow-nav {position:absolute;top:1px;left:1px;width:788px;height:250px;padding:0;margin:0;list-style-type:none;}
header#carousel nav ul#arrow-nav li {position:absolute;display:block;width:200px;height:250px;z-index:10;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous {top:0;left:0;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next {top:0;right:0;}
header#carousel nav ul#arrow-nav li a {position:absolute;top:50%;margin-top:-35px;display:none;width:50px;height:70px;overflow:hidden;opacity:0;text-indent:-1000px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous a {left:20px;background-position:-95px -156px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next a {right:20px;background-position:-153px -156px;}

EDIT

Я хотел сказать «li», а не «div»

UPDATE

Возможно, проблема не в HTML / CSS, так как мне удалось определить, что элемент отображается в передней части страницы. Проблема, кажется, происходит с jQuery. Функция mouseenter не срабатывает, когда я перемещаю мышь над элементом. Это известная ошибка в jQuery?

РЕШЕНИЕ

Я понял, в чем проблема. Это связано с hasLayout элементов, которые я упомянул. Поскольку у них прозрачный фон, событие jQuery не регистрируется, когда я на них наведу курсор мыши. Решением этой проблемы является установка прозрачного фона с изображением.

Пожалуйста, обратитесь к: Mouseenter срабатывает только на границе прозрачного div в IE9

Спасибо за все ваши советы, и извините, что потратили ваше время.

Answer 1

Работая с вашим CSS, я подошел:

#carousel {
    position: relative;
    width:790px;
    height:275px;
    margin:10px auto 0;
    padding:0;
    overflow:hidden;
}

...

#carousel-holder {
    position: absolute;
    top: 0;
    left: 0;
    width:788px;
    height:250px;
    background:#fff;
    border:1px solid #999;
    border-radius:10px;
    margin:auto;
    padding:0;
    overflow:hidden;
}

...

#carousel nav {
    position: absolute;
    top: 0;
    left: 0;
}
#arrow-nav {
    position: absolute;
    top: 1px;
    left: 1px;
    width:788px;
    height:250px;
    padding:0;
    margin:0;
    list-style-type:none;
}
#arrow-nav li {
    width: 200px;
    height: 100%;
    background: #dff;
}
#carousel-arrow-previous {
    float: left;
}
#carousel-arrow-next {
    float: right;
}

...


#arrow-nav li a {
    margin-top:-35px;
    display:block;
    width:50px;
    height:70px;
    overflow:hidden;
    opacity:1;
    background: #fdf;
    position:absolute;
    top:50%;
    text-indent:-1000px;
    /*z-index: 1000;*/
}
#carousel-arrow-previous a {
    left: 20px;
    background-position:-95px -156px;
}
#carousel-arrow-next a {
    right: 20px;
    background-position:-153px -156px;
} 

http://jsfiddle.net/6w5BN/1/

Работает в режиме совместимости IE9 и IE7 / 8. Я установил для #carousel элемент position: relative, что позволило мне установить #carousel-holder и #carousel nav равными position: absolute и унаследовать естественный z-index порядок наложения, подразумеваемый в разметке.

Обратите внимание, я изменил некоторые другие настройки, чтобы видеть, что я делаю (например, opacity: 1 и background: color для некоторых элементов). Я не знаю, является ли то, что у вас есть (известной / неизвестной) ошибкой рендеринга IE, или нет, но очистка подхода, похоже, решает все, что происходит.

EDIT

IE другой opacity синтаксис :

#arrow-nav li a {
    margin-top:-35px;
    display:block;
    width:50px;
    height:70px;
    overflow:hidden;
    opacity:0;
    filter: alpha(opacity=0); /* For IE6/7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    background: #fdf;
    position:absolute;
    top:50%;
    text-indent:-1000px;
    /*z-index: 1000;*/
}

...

#arrow-nav li a.show-opacity {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE6/7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
}

$('#arrow-nav li')
    .mouseenter(function(){
        $(this).find('a').addClass('show-opacity');
    })
    .mouseleave(function(){
        $(this).find('a').removeClass('show-opacity');
    });

http://jsfiddle.net/6w5BN/8/

Answer 2

Я думаю, что это вызвано тем, что ваш «текстовый отступ» был установлен как отрицательный для якорей.Я полагаю, что это как-то связано с тем, что элемент привязки контролирует свой собственный макет в IE, а не останавливает текст по краям.Вот краткое описание свойства " hasLayout " и некоторых проблем, которые оно может вызвать в IE.Я удалил «текстовый отступ», и ссылки «Предыдущая / Следующая» выглядели как обычно на любых изображениях, которые я установил в карусели.

Answer 3

Вы используете HTML 5 теги на странице. Какую поли заливку вы используете для IE, поскольку IE7-9 задействован. Это также может быть связано с этим.

Порядок размещения в IE z-index отличается от других браузеров. Его порядок z-index основан на родительском элементе.

Answer 4

Вы установили display: none на header#carousel nav ul#arrow-nav li a.