Выпадающее меню CSS смещено в IE8 - PullRequest
Новая
       9

Выпадающее меню CSS смещено в IE8

2 голосов
/ 22 июля 2010

У меня есть несколько выпадающих меню, которые, кажется, не очень хорошо совмещаются в IE8 - они хорошо совмещаются в Firefox 3 и IE7.В частности, выпадающие списки, кажется, игнорируют мое право: 0;стиль.Изображение говорит тысячу слов, поэтому оно выглядит следующим образом:

Выровненное меню http://lh5.ggpht.com/_gXJgvXl6JFY/TEf9v1BmECI/AAAAAAAAAA4/iGF-Wi8CTyU/misaligned%20menu.png

Как видите, правая сторона раскрывающегося списка должна совпадать с правой сторонойвыделенный «admin» li, но он находится посередине.

Важные выпадающие стили css: 

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
}

Важные стили «admin» li: 

.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}

И HTML-код для этого бита: 

<li class="normal ajs-menu-item">
<a href="#" class="user trigger ajs-menu-title" id="user-menu-link"><span><span>admin</span></span></a>         
<div class="ajs-drop-down" style="width: 111px;">
<ul class="section-user-status first" id="user-menu-link-user-status">
... bunch of <li>s               
</ul>
</div>
</li>

Если кто-то мог бы пролить свет, который был бы великолепен, просто сводил меня с ума: (.

Спасибозаранее !!!!

Ура, Дженни

1 Ответ

2 голосов
/ 22 июля 2010

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

Приведенный ниже код, вероятно, не точен (в отношении выделения браузера), но он должен дать вам представление о том, что делать ... 

<![If lt IE7]>
    <link href="ie8.css" type="text/css" rel="stylesheet" />
<![End If]-->

Как только вы это сделаете, скопируйте css для вашего меню в этот файл (как есть) и измените поля для выпадающего меню: 

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
margin-right: 40px !important;
}

Если изменение правого поля, как показано здесь, не работает, попробуйте установить для левого поля отрицательное значение. Я знаю, идея кажется нелепой, но в своем исследовании Liquid Design я обнаружил, что иногда это ЕДИНСТВЕННЫЙ способ получить что-то правильное.

НТН

...