5

IE のすべてのバージョンで、input[text] フィールドの幅に問題があります。

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

IE では、幅を 100% + 10px としてレンダリングします。コンテナーの幅を制限する手法がわかりません。

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

IE のボックス モデルには幅の計算にボーダーとマージンが含まれていることを理解しています。

また、入力幅をパディングで 240px に設定するよりも良い解決策を見つけようとしています。このフォームにはさまざまな入力があり、コンテナのサイズが異なり、普遍的な解決策を見つけたいからです。

ここにいくつかのコードがあります：

<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

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

4 に答える 4

6

最善の解決策:実際の解決策

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

これはIE8+、そしてもちろん他のすべての最新ブラウザで動作します

醜い解決策ですが、古いIEでも機能します：こちら

于 2012-11-15T12:06:28.320 に答える
2

  1. 互換モードの IE には、間違ったボックス モデルが適用されます。したがって、厳密モードをトリガーする必要がある場合があります。たとえば、http ://www.quirksmode.org/css/quirksmode.html を参照してください。

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

于 2009-07-23T22:28:33.910 に答える
0

これを確認してください：http: //vitaly.harisov.name/example/broken-input-width-computation-in-msie.html 私は2番目の解決策に従いました。

于 2011-04-22T15:27:22.247 に答える
0

max-width の問題を除いて、IE はここで正しいことをしています。CSS ボックス モデルでは、要素の全体的なサイズは、幅にパディングを加えたもの、マージンを加えたものであると言われています。

また、ボックス モデルは、非フローティング ブロック レベル要素の場合、要素の全体サイズ (すべてを含む) が常に含まれる要素の 100% であることも示しています。入力ボックスの幅を「自動」に設定し、パディング、ボーダー、マージンを明示的に設定することで、これを有利に利用できます。

以下にちょっとした例を示します (これが大量のマークアップであることはわかっていますが、要点を説明するには少しやり過ぎです)。

.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;
}
于 2009-07-23T22:40:11.937 に答える