Как заставить элемент li быть 100% ширины родительского контейнера в IE 7? - PullRequest
Новая
       1

Как заставить элемент li быть 100% ширины родительского контейнера в IE 7?

2 голосов
/ 21 декабря 2010

Я применяю цвет фона к своим элементам списка. Но в IE7 мои дочерние элементы списка не отображаются на всю ширину родительского элемента UL. Вместо этого кажется, что они действуют как встроенные элементы (их ширина распространяется только на границу текста, составляющего их содержимое), хотя я установил для дочерних элементов li отображение: block;

Правильно отображается во всех протестированных браузерах, кроме IE7. Так что я думаю, что это может быть конкретный обходной путь для этого браузера, да? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
  .menu.top {height:30px; overflow:hidden; color:#f9f9f9; text-transform:uppercase; font-size:.85em;margin:101px 0 20px 0; padding-left:30px; border-radius: 15px; -moz-border-radius:15px;background:blue;}
/*category flyout menus */
.menu.top.cat {overflow:visible; }
.menu.top ul {margin:0; padding:0;white-space:nowrap;background:blue; position: relative; list-style: none; z-index: 50;}
.menu.top ul ul li {display:block;width:100%;clear:both;float:none;background:#777;}
.menu.top ul ul { position: absolute; visibility: hidden; list-style: none; z-index: 9999; }
.menu.top ul ul li {display:block;width:100%}
.menu.top ul a {white-space:nowrap;color:#fff;line-height:30px; padding:0 10px; display: block; }
.menu.top ul ul ul { position: absolute; top: 0; }
.menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;}
.menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; }
.menu.top ul a:hover {background:url(spot2.gif);background:url(bar-bg.png) repeat-x, url(spot2.gif) repeat;color:#333; text-decoration:none;}
.menu.top ul.children li.current-cat a {color:#333;}  </style>
 </head>
<body>
    <div class='menu top cat'>
        <ul class='catparent'>  
            <li class="cat-item"><a href="#" >Best Camera&#039;s Under $100</a>
                <ul class='children'>
                    <li class="cat-item"><a href="#">Blue Cameras under $100</a></li>
                    <li class="cat-item"><a href="#">Red Cameras</a></li>
                </ul>
            </li>
            <li class="cat-item"><a href="#">Cameras by Review Rating</a></li>
            <li class="cat-item"><a href="#">Best Camera&#039;s Under $200</a>
                <ul class='children'>
                    <li class="cat-item"><a href="#">best lightweight cameras under $200</a></li>
                    <li class="cat-item"><a href="#">best black cameras under $200</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 21 декабря 2010

Я не могу воспроизвести вашу проблему, но я использую IE8 в совместимости, поэтому я не могу протестировать на оригинальном IE7.

Но я считаю, что знаю, что вы делаете, если у вас все еще есть проблемы.Попробуйте заменить эту строку 

.menu.top ul ul li { clear: both;}

следующим: 

.menu.top ul ul li { float:none}

Возможный сценарий: элементы списка в подменю принимают этот CSS 

.menu.top ul li {margin:0; padding:0; position: relative; float: left;}

, которыйможет конфликтовать со свойством clear в IE7 и по какой-то причине иметь приоритет над ним.

Так что css хотел бы следующее: 

menu.top {height:30px; overflow:hidden; color:#f9f9f9; text-transform:uppercase; font-size:.85em;margin:101px 0 20px 0; padding-left:30px; border-radius: 15px; -moz-border-radius:15px;background:blue;}
/*category flyout menus */
.menu.top.cat {overflow:visible; }
.menu.top ul {margin:0; padding:0;white-space:nowrap;background:blue; position: relative; list-style: none; z-index: 50;}
.menu.top ul li {display:block;width:100%;float:left;background:#777;} /* added float to this rule again, and removed the clear property */
.menu.top ul ul { position: absolute; visibility: hidden; list-style: none; z-index: 9999; }
.menu.top ul ul li {display:block;width:100%}
.menu.top ul ul ul {left:150px;}
.menu.top ul ul li { float:none} /* modified this rule*/
.menu.top ul a {white-space:nowrap;color:#fff;line-height:30px; padding:0 10px; display: block; }
.menu.top ul ul ul { position: absolute; top: 0; }
.menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;}
.menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; }
.menu.top ul a:hover {background:url(spot2.gif);background:url(bar-bg.png) repeat-x, url(spot2.gif) repeat;color:#333; text-decoration:none;}
.menu.top ul.children li.current-cat a {color:#333;}
0 голосов
/ 21 декабря 2010

Вы все еще видите это?Вот пример, который я придумал из вашего описания.Можете ли вы помочь изменить этот пример, чтобы лучше показать вашу ситуацию?

http://jsfiddle.net/zRZv2/1/

В этом примере, я вижу ширину, выходящую на 100% от родительского ul.

Bob

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...