IE7 CSS Горизонтальное меню - Ли, кажется, вкладывается друг в друга - PullRequest
Новая
       36

IE7 CSS Горизонтальное меню - Ли, кажется, вкладывается друг в друга

1 голос
/ 09 марта 2012

Я знаю, что эта проблема IE возникает снова и снова, но я провел все утро в поисках ответов, и, похоже, никто не помог мне.

Мое горизонтальное навигационное меню отлично отображается во всех браузерах, кроме IE7. Я думаю, что проблема может заключаться в том, что мои списки не имеют ширины (но я не хочу, чтобы ширина была автоматической, в зависимости от длины текста), либо это, либо li, кажется, находятся внутри каждого другой и продолжайте применять 14px padding-top. Я не знаю, почему они сидят друг в друге, хотя у моего li есть закрывающие теги и число с плавающей точкой: left;

Вот мой код .. 

<div id="navig">
    <ul>
        <li class="navig-left"></li>
        <li class="home"><b>Home</b></li>
        <li><a class="tabs" href="about.html">About Us</a></li>
        <li><a class="tabs" href="services.html">Services</a></li>
        <li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li>
        <li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li>
        <li><a class="tabs" href="contact.html">Contact Us</a></li>
        <li><a class="tabs" href="careers.html">Careers</a></li>
        <li><a class="tabs" href="affiliates.html">Affiliates</a></li>
        <li class="navig-right"></li>
    </ul>
</div>

<div class="clr"></div>



#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); }
#navig ul { list-style-type:none; height:46px; width:960px; }
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; }
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; }
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); }
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); }

Ответы [ 2 ]

1 голос
/ 09 марта 2012

Попробуйте добавить следующее правило CSS, чтобы все li элементы плавали (поскольку вы используете подход с плавающей точкой): 

#navig ul li {float:left;}

Глядя на свою таблицу стилей, вы фактически не применяете float:left ко всем пунктам списка в меню, только li.active и li.home.Другие браузеры, похоже, справляются с этим, но IE это не нравится.

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

Я тестировал эту скрипку в IE 7/8/9, FF и Chrome.Работает стабильно сейчас.

0 голосов
/ 09 марта 2012

Вы можете заставить IE7 отображать как ie8, добавив это в заголовок вашей страницы. 

<meta http-equiv="X-UA-Compatible" content="EDGE" />
...