Отображение CSS: встроенный блок и ширина: 100% не работает на IE6 и IE7 - PullRequest
Новая
       8

Отображение CSS: встроенный блок и ширина: 100% не работает на IE6 и IE7

0 голосов
/ 05 июля 2010

CSS display: inline-block и width: 100% не работают в IE6 и IE7.
У кого-нибудь есть какое-то решение? Спасибо! 

<style>
nav {text-align: justify;}
nav li {display: inline-block; white-space: nowrap;}
nav span {display: inline-block; width: 100%;}
</style>
...
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
    <span></span>
  </ul>
</nav>

Обновление:
Так что он отлично работает и на IE6, но когда в списке больше слов, он выглядит нехорошо -> "Свяжитесь с нами" : 

nav { text-align: justify; }
nav * { display: inline; }
nav span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
  </ul>
  <span></span>
</nav>

Ответы [ 3 ]

3 голосов
/ 05 июля 2010

Для IE6 и IE7 вы можете попробовать использовать (в таблице стилей, включенной в условные комментарии) 

display: inline;
zoom: 1;

zoom: 1 триггер hasLayout, который похож на поведение inline-block.

Я согласен с вышеприведенными комментариями, что вы не должны иметь span в качестве прямого потомка ul.

1 голос
/ 05 июля 2010

Несколько предложений:

  • Исправьте свой HTML - UL должен содержать только LI, а не SPAN
  • Нет такой вещи, как элемент NAV
  • Попробуйтеплавающие LI с помощью float: left - вы также должны установить ширину для них
  • Если вы хотите, чтобы элемент занимал всю ширину страницы, используйте display: block;Это будет работать во всех браузерах - при условии, что ваш HTML правильный!

Посмотрите на html validator , это должно помочь вам с вашими ошибками HTML - есть также отличный валидаторплагин для Firefox, который делает эту работу тоже.

0 голосов
/ 05 июля 2010

Я не воссоздал код, но могу вам сказать, что вы не можете использовать элемент span, вложенный в ul такого типа.Попробуйте изменить интервал на li с помощью id и посмотреть, получите ли вы лучшие результаты.

Чего вы пытаетесь достичь с помощью этого?

...