2010-06-19 1 views
1

У меня есть родительский контейнер, который составляет 100%. Он содержит 2 плавающих divs, которые имеют ширину: 50%. Дети содержат только текст. Проблема в том, что дети набираются так широко, как текст, а не на 50% от ширины родительского контейнера. Это всего лишь ie7, что является проблемой. Может быть, и ie6, но меня не волнует этот браузер.css width% in ie7

ball (width 16px position absolute) 
    parent (width 100% position absolute. Should be more than 16px) 
     child (width:50% float left) 
     child (width:50% float left) 

Может кто-нибудь помочь?

+2

Пожалуйста, разместите код HTML + CSS – FelipeAls

ответ

2

Не нужно взломать JS. Просто используйте правильный doctype.

Copy'n'paste'n'run это, проверьте результат, затем удалите doctype и повторите проверку в IE.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <style> 
      body { width: 300px; } 
      .parent { width: 100%; border: 1px solid black; overflow: hidden; } 
      .child { float: left; width: 50%; } 
      h3 { clear: left; } 
     </style> 
    </head> 
    <body> 
     <h3>Test 1</h3> 
     <div class="parent"> 
      <div class="child">text</div> 
      <div class="child">text</div> 
     </div> 
     <h3>Test 2</h3> 
     <div class="parent"> 
      <div class="child">text text text text text text text text text text</div> 
      <div class="child">text</div> 
     </div> 
     <h3>Test 3</h3> 
     <div class="parent"> 
      <div class="child">text</div> 
      <div class="child">text text text text text text text text text text</div> 
     </div> 
    </body> 
</html> 

Без DOCTYPE или с неэталоны режима DOCTYPE IE будет именно рендеринга в quirks mode.