23 January 2009

IE, Quirks mode и ошибки при отображении полей ввода в зависимости от того, вводятся латинские или кириллические символы

CSS
Добрый день всем

Старичок IE не перестает нас удивлять и подкидывать все новые проблемы, в самых неожиданных местах.

При работе над проектом столкнулся с неожиданным поведением полей ввода input и textarea при работе IE в режиме quirks mode. И все бы ничего, в общем-то — кого сегодня удивишь странностями и багами 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>


Режим quirks для отображения в IE6/7 выбран осознанно, это необходимое начальное условие.

На словах: есть блок некоторой заданной ширины (в % или px), которому задан дополнительно отступ справа. Внутри этого блока содержится поле ввода input или textarea.

Известно, что в режиме quirks, IE любит считать ширину, включая в нее padding. Кроме того известно, что в этом режиме размеры inline-элементов реагируют на свойства ширины и высоты. Т.е. для input и textarea можно указать ширину, что и сделано: ширина задана в % родительского блока. Для наглядности пусть будет 100%. В соответствии с этим, ширина вложенных input и textarea, пока они не заполнены, составляет ширину родительского контейнера минус его отступ справа.

Fun starts, когда пытаемся что-то ввести в поля. При введении в input кириллических символов внешний отступ содержащего поле контейнера исчезает и поле «разъезжается» на всю ширину. Если вводить латинские символы — проблема не проявляется. C textarea проблема проявляется независимо от того, кириллические символы вводятся или латинские. Такое поведение наблюдается на IE6/7 под WinXP SP2.

Вот изображение того, что происходит:


Как избавиться от этого «разъезжания» input и textarea и с чем может быть связана такая «аллергия» именно на кириллические символы для меня остается загадкой. Если кто-то подскажет способ решения проблемы буду очень благодарен.
Tags:iebugsquirks mode
Hubs: CSS
+3
2.1k 2
Comments 38