css：IEの入力の幅と埋め込みの問題

Question

IEのすべてのバージョンで、入力[テキスト]フィールドの幅に問題があります。

明示的に設定された幅250pxのdivがあります。 このdivには、幅100％の入力テキストフィールドがあります。この入力には、10pxの内部左パディングもあります。

IEでは、幅を100％+ 10pxとしてレンダリングします。私はコンテナへの幅を制限するテクニックを理解することはできません。

この問題は最初はすべてのブラウザで発生しましたが、FF、Safari、Chromeではmax-width：100％を追加することで簡単に修正できました。 IE6/7はこれをサポートしていませんが、IE8はサポートしていますが、まだパディングを幅に追加しています。

私は、IEのボックスモデルに幅の計算に枠と余白が含まれていることを理解していますので、わかっているように私はまだこれを回避できません。

また、私の入力幅を240pxに設定する以外にも、パディングを使用するよりも優れた解決策を見つけることを試みています。このフォームにはさまざまな入力があり、コンテナのサイズが異なり、普遍的なソリューションを探しています。

.places_edit_left{ width:250px; } 
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;} 

Answer 1

1. 間違ったボックスモデルがQuirksモードでIEに適用される

   <div class="places_edit_left"> 
       <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4> 
       <input type="text" value="" name="phoneNumber"/> 
   
       <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4> 
       <input type="text" value="" name="address"/> 
   </div> 
   

   CSS：

   はここにいくつかのコードです。したがって、厳密なモードを起動する必要があります。例えば、 http://www.quirksmode.org/css/quirksmode.html

2. 入力をコンテナと同じ幅にしたいですか？明示的に幅を設定します（パディングの場合は250px - 10px、境界の場合はXXpx）。入力をdivより広くしたくないのですか？ divのオーバーフローを非表示に設定します。

Answer 2

ここでは最大幅の問題を数えていませんが、ここでIEは正しいことをしています。 CSSボックスモデルでは、要素の全体的なサイズは、その余白にPLUSの余白を加えた幅であると言います。

ボックスモデルでは、非フローティングブロックレベル要素の場合、要素のすべてのサイズ（すべてを含む）は常にその要素の100％です。入力ボックスの幅を「auto」に設定し、パディング、枠線、余白を明示的に設定することで、これを有効に活用できます。

ここでは、この

.places_edit_left{ 
    width:250px; 
    overflow:auto; 
} 

.places_edit_left input { 
    padding-right:0px; 
    padding-left:10px; 
    margin: 0 0 0 0; 
    border:1px solid black; 
    width:auto; 
    display:block; 
    float:none; 
} 

Answer 3

チェック、（私はこれはマークアップがたくさんある知っているが、これはポイントを説明するためにやり過ぎのビットです）少し例を示しますhttp://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html 私は第二の溶液を追ってきたが、 。

Answer 4

ベストソリューション：Real solution

.content { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

この1は、IE8 +のために働くと、もちろん他のすべての近代的なブラウザ

醜いソリューションが、また、古いIEでの作業になります。Here