IEでこのレイアウトの問題を解決する方法はありますか？

Question

以下はレイアウトの問題へのリンクです。それはなぜそれがIEのように表示され、それのための修正を知っていますか？テキストボックスが外側のdivを超えている理由Chrome & Firefoxの両方で問題ありません。ここで

http://nothing123.s3.amazonaws.com/test-ie.htm

htmlです。

<style> 
    #loginBox { 
    width: 336px; 
    border: 1px solid red; 
    padding: 5px; 
    } 
    #loginEmail { 
    border: 1px solid blue; 
    padding: 5px; 
    width: 100%; 
    } 
</style> 

<div id="loginBox"> 
    <input type="text" id="loginEmail"/> 
</div> 

Answer 1

これはボックスモデルと関連があります。

実際の#loginBox実際の幅は、幅+パディング+ボーダーに等しいです。あなたのloginBoxは現在348px（336+（5x2）+（1x2））です：

#loginEmailは親の幅に対して100％、つまり348pxに設定されています。これで余白が追加され、境界線になると360pxになります。 #loginBoxの内部はわずか336pxなので、自然に出血します。

box-sizing:border-boxに#loginEmailを追加して、ブリードアウトしないようにします（境界とパディングを100％考慮します）。ただし、これはIE8 +でのみサポートされています。

このプロパティについての詳細情報については、何のブラウザをサポートし、check this page

Answer 2

そのあなたは#loginEmailにパディング5pxのを伴って含む幅100％を追加したため。パディング：5pxは幅を合計し、100％を超え、divから出血しています。 この問題を解決するには、幅をpxまたはパディングでパーセントで指定します。 #loginEmailにこのCSSスタイルを追加する例えば

#loginEmail { 
    border: 1px solid blue; 
    padding: 1%;/*total 2% for left(1%) and right(1%) padding*/ 
    width: 97%;/*97 + 2%(padding) = 99%*/ 
    } 

OR 

#loginEmail { 
    border: 1px solid blue; 
    padding: 5px; 
    width: 300px; 
    } 

Answer 3

は問題ため#loginEmailパディング5pxのの

box-sizing: border-box; 

Answer 4

その修正されています。それを取り外し、パッディングトップ+ボトムを使用してください。 text-indent：5pxを使用してテキストを5x左に移動します。