IE6 и IE7 поплавок проблема в элементах списка навигации - PullRequest
Новая
       44

IE6 и IE7 поплавок проблема в элементах списка навигации

0 голосов
/ 18 августа 2011

Как и у многих людей, у меня проблемы с плавающими элементами в IE7 (и 6, но мне все равно!)

http://www.storybox.co.nz/wordpress/

Хорошо выглядит в любом другом браузере, но в IE7 навигационные ссылки расположены друг под другом: enter image description here

HTML (встроенные стили взяты из выпадающего скрипта js): 

<div id="primary-menu">
  <div class="menu">
    <ul>
      <li><a href="#" class="sf-with-ul">Work.</a>
        <ul class="sub-menu" style="float: none; width: 1em; visibility: hidden; display: none;">
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Spatial /</a></li>
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Web /</a></li>
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Graphic</a></li>
        </ul>
      </li>
      <li><a href="#">Lab.</a></li>
      <li><a href="#">About.</a></li>
    </ul>
  </div>
</div>

CSS: 

#primary-menu {
    margin:-30px auto 30px;
}
#primary-menu ul {
    float:right;
}
#primary-menu li {
        float: left;
        list-style: none;
        margin-left: 10px;
            display:inline;
}
#primary-menu ul li a {
        float: right;
}

Я пробовал показывать: встроенные элементы li, а также элементы a, но это не работает.

Есть еще советы? Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 августа 2011

Я тестировал на IE 7 и ниже обновленный CSS. 

#primary-menu {
   /* margin:-30px auto 30px;*/ /*Avoid negative margins*/
}
#primary-menu ul {
  float:right;
}
#primary-menu li {
    float: left;
    list-style: none;
    margin-left: 10px;
        display:inline;
}
#primary-menu ul li a {
   /* float: right;*/ /*This caused the issue*/
   }

Надеюсь, это поможет

0 голосов
/ 18 августа 2011

проблема, вероятно, ширина: 100% для li. Если ul равен 100px, то каждый из li также будет иметь 100px = они будут отображаться, как показано. Попробуйте установить для них фиксированную ширину, но ширина 3x (+ отступы, поля) должна быть меньше ширины для ul. Вы также можете попробовать 33%. BT

float: right помещает display: block в элемент, и нет смысла добавлять display: inline вместе с float: right. Я предполагаю, что IE игнорирует display: inline. Также нет смысла указывать ширину для встроенного элемента. Ваш простой CSS не имеет смысла:)

...