griglia fluido di bootstrap: l'ingresso esce dal suo contenitore in ie7

Question

Perché in IE7 l'ingresso esce dal suo contenitore?

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: Suppongo box-modello di esso e di emissione di larghezza, ma è una soluzione con bootstrap?

Answer 1

questo accade perché IE7 non supporta la proprietà css

box-sizing: border-box; 

che considera padding e il bordo formato come parte degli elementi larghezza.

Ulteriori informazioni su questo immobile qui: http://paulirish.com/2012/box-sizing-border-box-ftw/

a causa di questo, IE7 aggiunge la dimensione del padding e border alla larghezza di ingresso - supera la larghezza genitore. Dovrai impostarli su 0 per far sì che l'elemento si adatti alla dimensione del genitore e rimanere fluido.

Si potrebbe provare ad aggiungere un elemento wrapper attorno all'input e quindi impostare il padding e il bordo al wrapper. Funzionerà su tutti i browser

Answer 2

Stavo avendo un problema simile. Ho risolto sostituendo

class="span3" 

con

class="input-mini" 

Si potrebbe usare tute di input-piccole o qualunque naturalmente. Dato che stavi cercando span12 per i tuoi input ti suggerisco "input-xxlarge"