IE7 дочерние элементы не заправочные родителю

У меня есть структура вроде этого:IE7 дочерние элементы не заправочные родителю

<ul class="control tabSet buttons vertical "> 
    <li class="tab first"> 
    <button class="button up" id="source"> 
     <span class="wrap">Label 1</span> 
    </button> 
    </li> 
    <li class="tab last"> 
    <button class="button up" id="save"> 
     <span class="wrap">Label 2</span> 
    </button> 
</li> 
</ul>

Во всех браузерах, кроме IE7, просто установив ширину .button элемента до 100%, я получаю поведение, каждый ребенок имеет такой же широкий, как и самый широкий ребенок (как определено в тексте внутри элемента .wrap). Мне не нужно устанавливать ширину родительского элемента; он, по-видимому, устанавливается браузером на основе ширины самого широкого дочернего элемента.

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

Я могу себе представить решение этого с помощью Javascript, но задавался вопросом, есть ли какой-то трюк IE7 CSS, который я могу попробовать?

Спасибо!

источник

2010-07-28 Tim Sheiner

Вы пробовали сброс CSS? Простого один

*{margin:0;padding:0}

Если положить, что @ в верхней части файла CSS, он должен сбросить стили в Internet Explorer CSS по умолчанию (только на маржу & обивки)

источник

2010-08-10 22:47:58 JKirchartz

Какова ширина вашего .tab список элементов? Если они настроены на float и не указывают ширину, это может вызвать проблемы.

источник

2010-09-23 20:05:10 logan

Я пробовал, но не кажется, что есть проблема. Аналогично работает в IE7 и Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Test</title> 
     <style type="text/css"> 
      .tab { width: 500px; } 
      .button { width: 100%; } 
     </style> 
    </head> 

    <body> 
     <ul class="control tabSet buttons vertical "> 
      <li class="tab first"> 
       <button class="button up" id="source"> 
        <span class="wrap">Label 1</span> 
       </button> 
      </li> 
      <li class="tab last"> 
       <button class="button up" id="save"> 
        <span class="wrap">Label 2</span> 
       </button> 
      </li> 
     </ul> 
    </body> 
</html>

Я пробовал это на своем локальном хосте. Нет проблем.

источник

2010-12-17 09:14:41 Shaakunthala

IE7 дочерние элементы не заправочные родителю

ответ

Смежные вопросы