Выпадающее меню при наведении курсора CSS в Internet Explorer - PullRequest
Новая
       6

Выпадающее меню при наведении курсора CSS в Internet Explorer

1 голос
/ 27 августа 2010

Попытка создать веб-сайт, который будет выглядеть так же хорошо в Internet Explorer, как и в Firefox, невероятно трудная задача.Однако в IE есть по крайней мере одна ошибка, которая особенно озадачивает нашу команду.Раскрывающееся меню прекрасно отображается в Firefox и Chrome, но выглядит совершенно непонятно в Explorer.

Это изображение показывает, как выглядит меню при просмотре в Firefox и Explorer соответственно.Пожалуйста, нажмите на ссылку, чтобы увидеть изображение.

http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png

Пожалуйста, помогите!Кто-нибудь еще сталкивался с этой проблемой при попытке использовать меню, отформатированное в CSS?В меню используются неупорядоченные списки и элементы списка, а для отображения содержимого подменю используется курсор мыши.

Заранее спасибо!

ОБНОВЛЕНИЕ: по какой-то причине меню работало само по себе вIE, но он все еще не работает на нашем сайте.Загадочный ...

Вот код.

HTML-код: 

<head>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/>
</head>
<body>
<ul id="topDropDownMenu">
<li id="aboutDropDown"><a href="#">About</a>
</li>
<li id="contactDropDown"><a href="#">Contact</a>
<ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>

и вот код: 

#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;}

#topDropDownMenu li ul {
    width:11em !important;/* leaves room for padding */
    cursor:default;
    position:absolute;
    height:auto;
    display:none;
    left:-10px;
    padding:1px 10px 10px 10px;
    background:url(/img/clear.gif);
}
/* All LIs */
#topDropDownMenu li {
    position:relative;
    width:8.3em;
    max-width:16.5%;
    cursor:pointer;
    float:left;
    list-style-type:none;
    font-weight:bold;
        border-style:solid;
        border-width:1px;
    border-color:#222;
    text-align:center;
        -moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu LIs */
#topDropDownMenu li ul li {
    width:8.3em/*FF*/;
    padding:0;
    border:none;
    max-width:100%;
    border:1px solid #333;
    border-top:none;
        -moz-border-radius:0px 0px 0px 0px;
}
/* All anchors */
#topDropDownMenu li a {
    cursor:pointer !important;
    color:#666;
    text-decoration:none;
    display:block;
    float:left;
    height:2em;
    line-height:2em;
    width:100%;
        -moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu Anchors */
#topDropDownMenu li ul li a {
    width:8.3em/*FF*/;
    position:relative !important;
    cursor:pointer !important;
    white-space:nowrap;
    line-height:1.7em;
    height:1.7em;
    font-weight:normal;
    color:#666;
    background-position:0 50% !important;
        -moz-border-radius:0px 0px 0px 0px;
}
/*hover*/
#topDropDownMenu li a:hover,
#topDropDownMenu li a:focus,
#topDropDownMenu li a:active {color:#000;background:#fff}
/* display and z-index for the sub-menus */
#topDropDownMenu li:hover ul,
#topDropDownMenu li.msieFix ul  {display:block;z-index:10;top:2em !important;}
#topDropDownMenu li#aboutDropDown {z-index:2;}
#topDropDownMenu li#contactDropDown {z-index:1;}

.aboutDropDown #topDropDownMenu li#aboutDropDown ul,
.contactDropDown #topDropDownMenu li#contactDropDown ul {  display:block;top:-1000px}
#aboutDropDown a {background-color:#b9e075;}
#contactDropDown a {background-color:#f7c472;}

#topDropDownMenu li.msieFix a {}

.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus,
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active,
{position:absolute !important;top:1028px !important;}

Ответы [ 4 ]

4 голосов
/ 27 августа 2010

Не видя HTML и CSS, невозможно найти конкретное решение.Тем не менее, есть некоторые методы, которые могут помочь в устранении ошибок IE.

  • Перемещайте свои <li> s, даже если они не горизонтальные.
  • Add display: inline<li> s.
  • Назначьте width вашим <li> s или тегу <a> внутри.
  • Потенциально добавьте position: relative к <li> s.
  • Добавьте display: block к тегам <a> в <li> s.
  • Добавьте width: 100% или zoom: 1 (или что-либо еще, что вызывает hasLayout) кверхний уровень <ul>.

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

1 голос
/ 15 октября 2013 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        #topDropDownMenu {
            position: relative;
            background: no-repeat 100% 50%;
            width: 50em;
            max-width: 100%;
            float: left;
        }

            #topDropDownMenu li ul {
                width: 11em !important; /* leaves room for padding */
                cursor: default;
                position: absolute;
                height: auto;
                display: none;
                left: -10px;
                padding: 1px 10px 10px 10px;
                background: url(/img/clear.gif);
            }
            /* All LIs */

            #topDropDownMenu li {
                position: relative;
                width: 8.3em;
                max-width: 16.5%;
                cursor: pointer;
                float: left;
                list-style-type: none;
                font-weight: bold;
                border-style: solid;
                border-width: 1px;
                border-color: #222;
                text-align: center;
                -moz-border-radius: 8px 8px 0px 0px;
            }
                /* sub-menu LIs */

                #topDropDownMenu li ul li {
                    width: 8.3em /*FF*/;
                    padding: 0;
                    border: none;
                    max-width: 100%;
                    border: 1px solid #333;
                    border-top: none;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /* All anchors */

                #topDropDownMenu li a {
                    cursor: pointer !important;
                    color: #666;
                    text-decoration: none;
                    display: block;
                    float: left;
                    height: 2em;
                    line-height: 2em;
                    width: 100%;
                    -moz-border-radius: 8px 8px 0px 0px;
                }
                /* sub-menu Anchors */

                #topDropDownMenu li ul li a {
                    width: 8.3em /*FF*/;
                    position: relative !important;
                    cursor: pointer !important;
                    white-space: nowrap;
                    line-height: 1.7em;
                    height: 1.7em;
                    font-weight: normal;
                    color: #666;
                    background-position: 0 50% !important;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /*hover*/

                #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {
                    color: #000;
                    background: #fff;
                }
                /* display and z-index for the sub-menus */

                #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {
                    display: block;
                    z-index: 10;
                    top: 2em !important;
                }

                #topDropDownMenu li#aboutDropDown {
                    z-index: 2;
                }

                #topDropDownMenu li#contactDropDown {
                    z-index: 1;
                }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {
            display: block;
            top: -1000px;
        }

        #aboutDropDown a {
            background-color: #b9e075;
        }

        #contactDropDown a {
            background-color: #f7c472;
        }

        #topDropDownMenu li.msieFix a {
        }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {
            position: absolute !important;
            top: 1028px !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" />
</head>
<body>
    <ul id="topDropDownMenu">
        <li id="aboutDropDown"><a href="#">About</a></li>
        <li id="contactDropDown"><a href="#">Contact</a><ul>
            <li><a href="#">Form</a></li>
            <li><a href="#">Information</a></li>
        </ul>
        </li>
    </ul>
</body>
</body></html>
1 голос
/ 27 августа 2010

Я тоже люблю все кодировать, но HTML / CSS / JS Navigation - одна из тех областей, где вам не нужно изобретать велосипед.Независимо от того, как вы хотите, чтобы это выглядело, существует множество готовых решений, которые уже протестированы в разных браузерах.Suckerfish - это популярное решение для чистого html / css, но есть много других, которые будут работать просто отлично и будут легко выглядеть так, как вам хочется.(Только убедитесь, что стилизовали правильные элементы)

0 голосов
/ 27 августа 2010

Это едва ли считается ответом, но может помочь.

Кросс-браузерная совместимость может быть чем-то вроде чудовища для таких вещей, когда вы используете полностью индивидуальное решение.Это тот случай, когда использование библиотеки, такой как jquery UI, облегчит вам задачу, поскольку они, как правило, уже совместимы с различными браузерами.

Если это не вариант, невозможно будет не увидеть ваш код.С какой версией Internet Explorer вы тестируете?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...