2010-06-19 6 views
1

J'ai un conteneur parent qui est de 100%. Il contient 2 divs flottants dont la largeur est de 50%. Les enfants ne contiennent que du texte. Le problème est que les enfants sont aussi larges que le texte et pas 50% de la largeur du conteneur parent. C'est seulement ie7 c'est un problème. Peut-être aussi ie6, mais je me fiche de ce navigateur.css largeur% dans 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) 

Quelqu'un peut-il aider?

+2

S'il vous plaît poster un code HTML + CSS – FelipeAls

Répondre

2

Pas besoin d'un hack JS. Il suffit d'utiliser le droit doctype. Copy'n'paste'n'run ceci, vérifiez le résultat, puis supprimez le doctype et retest dans 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> 

Sans doctype ou avec un doctype non standard en mode IE à savoir rendre dans quirks mode.