Выпадающая строка HTML не работает в Internet Explorer

#javascript #html #css

#javascript #HTML #css

Вопрос:

CSS и JavaScript на данный момент и в моем HTML я создал выпадающую панель, и она работает в Chrome и Firefox, но не в Internet Explorer. Мне нужна выпадающая строка для работы в Internet Explorer.

Это мой код CSS:

 <body bgcolor='#52CC7A'>
        <style type="text/css">
    * { padding: 0; margin: 0; }
    body { padding: 5px; font-family: Arial, Helvetica, sans-serif; }
    ul { list-style: none; z-index: 999 }
    ul li { float: left; padding-right: 1px; position: relative; }
    ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background: #69C; color: #FFF; text-decoration: none; }
    ul a:hover { background: #09C; }
    li > ul { display: none; position: absolute; left: 0; top: 100%; }
    li:hover > ul { display: block; }
    li > ul li { padding: 0; padding-top: 1px; }
    li > ul li > ul { left: 100%; top: 0; padding-left: 1px; }
    li > ul li > ul li { width: 100px; }
    li:hover > a { background: #09C; }
</style>

Это мой HTML-код:

 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Players</a>
        <ul>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>

Это намного больше, но это упрощено.

Кто-нибудь знает, как изменить какой-либо код или что-то изменить, чтобы это работало в Internet Explorer? Спасибо 🙂

1. возможно, из-за неправильного html?

2. Вам нужно будет объяснить, почему вы считаете, что это не работает, и опубликовать больше вашего HTML-кода

3. это работает для меня в IE8 … нужны доказательства?

4. воспроизведите его в скрипке

5. ну, нет, мне сказали, что это не html-код, который находится в коде css, поэтому мне нужно найти другой код для этого

Ответ №1:

Я бы предложил показать больше кода и указать версию IE.

Возможно, вам не хватает a <!DOCTYPE html> в качестве первой строки вашего документа, которая требуется IE для работы:hover и> селекторов

Ответ №2:

Работает для меня в IE (протестировано в 8 и 11). Я исправил ваш HTML на это:

 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Players</a>
        <ul>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
        </ul>
    </li>
</ul>

Ответ №3:

Как упоминалось в одном из комментариев, он отлично работает для меня в IE8

Я не просматривал все css, но в IE7 кажется, что display:table-cell это играет up…it известно, что в IE7 есть проблемы. Если вы измените его на отображение inline-block и добавите высоту строки 50px , чтобы текст был выровнен по вертикали, все должно быть в порядке. Итак, это все, что я бы изменил…

 ul a 
{ 
    display: inline-block;  /* <-- change to inline-block  */
    line-height:50px; /* <-- align text vertically  */
    *display:inline; /* <-- IE7 hack  */
     zoom:1; /* <-- IE7 hack */
    vertical-align: middle; 
    width: 100px; 
    height: 50px; 
    text-align: center; 
    background: #69C; 
    color: #FFF; 
    text-decoration: none; 
}

обратите внимание, что я добавил хак для IE7, потому что он НЕ поддерживает inline-block

Наконец, вот как это выглядит…

введите описание изображения здесь