bootstrap fluid grid: Eingang bricht aus seinem Container in ie7

Question

Warum in IE7 Eingang bricht aus seinem Container?

http://jsfiddle.net/Q8jPM/2/

<div class="row-fluid" style="margin-top:10px;"> 
    <div class="span12"> 
     <div class="row-fluid"> 
      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span6 " style="background:green;"> 
         <input type="text" class="span12"> 
        </div> 
        <div class="span6" style="background:blue;"> 
         <input type="text" class="span12"> 
        </div> 
       </div> 
      </div> 
      <div class="span6"> 
       <div class="row-fluid"> 
        <div class="span6" style="background:green;"> 
         <input type="text" class="span12"> 
        </div> 
        <div class="span6" style="background:blue;"> 
         <input type="text" class="span12"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

UPDATE: Ich nehme an, es ist Box-Modell und Breite Problem, ist aber eine Lösung mit Bootstrap?

Answer 1

dies geschieht, weil IE7 nicht die CSS-Eigenschaft unterstützt

box-sizing: border-box; 

die Breite Polsterung und Grenzgröße als Teil der Elemente berücksichtigt.

mehr über diese Eigenschaft hier lesen: http://paulirish.com/2012/box-sizing-border-box-ftw/

aus diesem Grunde, IE7 fügt die Polsterung und Grenzgröße an die Eingangsbreite - mehr als die übergeordnete Breite. Sie müssen diese auf 0 setzen, um das Element an die übergeordnete Größe anzupassen und flüssig zu bleiben.

Sie könnten versuchen, ein Wrapper-Element um die Eingabe und dann setzen Sie die Füllung und den Rahmen zum Wrapper. Dies funktioniert in allen Browsern

Answer 2

Ich hatte ein ähnliches Problem. Ich beschloss, es durch

class="span3" 

mit

class="input-mini" 

ersetzen Sie könnten Input-klein oder was auch immer passt natürlich nutzen. Da du nach span12 für deine Eingaben suchst würde ich vorschlagen "input-xxlarge"