古いIEは私たちを驚かせ、最も予期しない場所で新しい問題を投げ出します。
プロジェクトで作業しているときに、IEがQuirksモードで動作しているときに、入力フィールドとテキストエリア入力フィールドの予期しない動作に遭遇しました。 そして、一般に、すべては何もありません-今日、誰がIEの奇妙な点とバグに驚くでしょう。 興味深いのは、どのような条件下で問題が顕在化するかです。 今回は、入力フィールドに入力された文字（キリル文字またはラテン文字）に応じて発生します。 キリル文字は問題の発現を引き起こし、ラテン語は正常に入力され、問題は発生しません。 これは私にとって十分に興味深く思えたので、私はこの観察結果をコミュニティと共有することにしました。
そのため、次のコンテンツのhtmlドキュメントがあります。
<font size="2" face="Courier New" color="black"><ol><li><font class="rem"><!-- force IE6/7 into quirks mode --></font></li><li><font color="#0000ff"><!</font><font color="#800000">DOCTYPE</font> <font color="#ff0000">HTML</font> <font color="#ff0000">PUBLIC</font> <font color="#0000ff">"-//W3C//DTD HTML 4.01//EN"</font> <font color="#0000ff">"http://www.w3.org/TR/html4/strict.dtd"</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">html</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">head</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="Content-Type"</font> <font color="#ff0000">content</font><font color="#0000ff">="text/html; charset=windows-1251"</font> <font color="#0000ff">/></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">style</font> <font color="#ff0000">type</font><font color="#0000ff">="text/css"</font><font color="#0000ff">></font></li><li>* { margin: 0; padding: 0; font-family: sans-serif; }</li><li>.wrapper { height: 30px; width: 300px; padding-right: 100px; background: #9ac; }</li><li> .wrapper input, .wrapper textarea { width: 100%; background: #e0e0e0; }</li><li> .wrapper textarea { overflow: auto; display: inline; }</li><li><font color="#0000ff"></</font><font color="#800000">style</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">head</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">input</font> <font color="#ff0000">type</font><font color="#0000ff">="text"</font> <font color="#0000ff">/></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"></</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">html</font><font color="#0000ff">></font></li></font></ol><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font>
IE6 / 7で表示するためのQuirksモードは意識的に選択されます。これは必要な初期条件です。
つまり、特定の幅（％またはpx）のブロックがあり、右側にインデントが追加されています。 このブロック内には、入力フィールドinputまたはtextareaが含まれています。
quirksモードでは、IEはパディングを含む幅をカウントするのが好きであることは知られています。 さらに、このモードでは、インライン要素の寸法が幅と高さのプロパティに反応することが知られています。 つまり 入力およびテキストエリアの場合、幅を指定できます。これは行われます。幅は親ブロックの％で指定されます。 明確にするために、100％とします。 したがって、ネストされた入力とテキスト領域の幅は、それらが満たされるまで、親コンテナの幅から右側のインデントを引いたものです。
フィールドに何かを入力しようとすると、楽しいことが始まります。 キリル文字が入力に導入されると、フィールドを含むコンテナの外側の余白が消え、フィールドが幅全体に「移動」します。 ラテン文字を入力すると、問題は発生しません。 Cテキストエリアの問題は、キリル文字が入力されたかラテン語に関係なく現れます。 この動作は、WinXP SP2のIE6 / 7で観察されます。
これが何が起こっているかのイメージです：
入力とテキスト領域のこの「追い払う」ことをどのように取り除くか、そしてキリル文字へのそのような「アレルギー」がどのように結びつくことができるかは、私には謎のままです。 誰かが問題を解決する方法を教えてくれたら、とても感謝します。