ブートストラップ流体グリッド：ie7で容器の入力が途切れます

Question

IE7の入力がコンテナから壊れてしまうのはなぜですか？

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：私はそれはボックスモデルと幅の問題だと仮定しますが、ブートストラップと任意のソリューションですか？

Answer 1

IE7はCSSプロパティをサポートしていないため、これは要素の幅の一部としてパディングとボーダーのサイズを考慮している

box-sizing: border-box; 

起こります。 - 親の幅を超えhttp://paulirish.com/2012/box-sizing-border-box-ftw/このための

、IE7は、入力幅にパディングとボーダーのサイズを追加します。

は、ここでは、このプロパティの詳細をお読みください。要素を親のサイズにフィットさせて流体を維持するには、それらを0に設定する必要があります。

入力の周りにラッパー要素を追加し、パディングと境界線をラッパーに設定することができます。これはすべてのブラウザで動作します

Answer 2

私は同様の問題を抱えていました。私はあなたが当然の入力、小規模またはどんなスーツを使用することができ

class="input-mini" 

で

class="span3" 

を交換することによってそれを解決しました。入力のためにspan12を探していたので、 "input-xxlarge"を提案します