Белые отметки появляются в моем всплывающем меню - PullRequest
Новая
       25

Белые отметки появляются в моем всплывающем меню

2 голосов
/ 14 июня 2011

У меня есть div всплывающего меню, которое отображается и скрывается с помощью следующего jQuery: 

$('#' + mnu).show('slide', { direction: 'down' }, 300);

В IE9 он отображается правильно:

Correct menu

... но в IE7 отображаются странные белые метки:

Incorrect menu

Кто-нибудь видел что-нибудь подобное раньше? Как я могу заставить IE7 отображаться правильно?

Вот HTML, если это поможет: 

<div id="mainMenu" style="display: block; ">
    <h2>Main menu</h2><img class="closeBtn" src="images/closeBtn.png">
    <nav id="mainNav" type="list">
        <li>
            <h3 tabindex="1">Category 1</h3>
            <ul style="display: block;">
                <li><a href="javascript:slides.goto(1);" tabindex="1">Item 1</a></li>
                <li><a href="javascript:slides.goto(2);" tabindex="1">Item 2</a></li>
                <li><a href="javascript:slides.goto(3);" tabindex="1">Item 3</a></li>
            </ul>
        </li>
        <li>
            <h3 tabindex="1">Category 2</h3>
            <ul style="display: none;">
                <li><a href="one.html" tabindex="1">Item 1</a></li>
                <li><a href="two.html" tabindex="1">Item 2</a></li>
            </ul>
        </li>
    </nav>
</div>

CSS: 

#mainMenu {
    display:none;
    background-color:#fff;
    position:absolute;
    left:0px;
    bottom:40px;
    margin:0;
    padding:0;
    -moz-box-shadow: 0px 0px 10px #959595;
    -webkit-box-shadow: 0px 0px 10px #959595;
    box-shadow: 0px 0px 10px #959595;
    width:350px;
    border: 2px solid #00add0;
    z-index:101;    
    font-size:15px;
}
#mainMenu h2 {
    display:block;
    background-color:#00add0;
    margin:0;
    padding:0 3px;
    font-family: 'DIN Next W01 Regular', Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform:uppercase;
    font-weight:normal;
    color:#fff;
    vertical-align:middle;
}

#mainMenu nav li h3 {
    font-weight:normal;
    font-size:15px;
    padding: 0 0 0 20px;
    margin:0;
}

#mainMenu nav li {
    display: block;
    list-style:none;
    background-color:#333;
    color:#fff;
    margin:0;
    padding:3px 0;
    cursor:pointer;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #242424;
    background-image:url('../images/twistArrowRight.gif');
    background-repeat:no-repeat;
    background-position:5px 5px;
}

#mainMenu nav li ul {
    padding:3px 0 3px 20px;
    margin:0;
}

#mainMenu nav li ul li {
    display: block;
    list-style:decimal;
    margin:0 0 0 -20px;
    padding:3px 0 3px 0px;
    cursor:pointer;
    border-top:0;
    border-bottom:0;
    background-image:none;

    font-size:12px;
    text-decoration:underline;
}

#mainMenu nav ul li a {
    display:block;
    color:#fff;
    font-size:12px;
    padding:0 0 0 40px;
}

#mainMenu nav ul li a:hover, #mainMenu nav ul li a:focus {
    background-color:#444;
}

Большое спасибо

1 Ответ

2 голосов
/ 14 июня 2011

IE7 не поддерживает HTML5, поэтому nav неизвестно.Я думаю, что IE7 оборачивает дочерние элементы li в ul, и вы видите маркеры.

Но элементы li вообще не должны быть прямыми дочерними элементами nav.Они должны быть в списке, насколько я знаю.

...