Siatka płynu startowego: wejście zrywa z pojemnika w ie7

Question

Dlaczego w wejściu IE7 wyskakuje z jego pojemnika?

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: Przypuszczam, że to box-model i szerokość problem, ale to każde rozwiązanie z bootstrap?

Answer 1

dzieje się tak dlatego IE7 nie obsługuje właściwość css

box-sizing: border-box; 

że uważa padding i border rozmiar jako część elementów szerokości.

przeczytać więcej o tej właściwości tutaj: http://paulirish.com/2012/box-sizing-border-box-ftw/

z tego powodu, IE7 dodaje padding i border rozmiar do szerokości wejścia - przekroczenie szerokości nadrzędnego. Będziesz musiał ustawić je na 0, aby dopasować element do rozmiaru rodzica i pozostać płynem.

możesz spróbować dodać element opakowania wokół wejścia, a następnie ustawić dopełnienie i obramowanie do opakowania. To zadziała we wszystkich przeglądarkach.

Answer 2

Miałem podobny problem. Postanowiłem ją zastępując

class="span3" 

z

class="input-mini" 

Można użyć garnitury Input-małe lub cokolwiek oczywiście. Ponieważ szukałeś span12 dla swoich wejść chciałbym zasugerować "input-xxlarge"