IE, Quirks mode and errors when displaying input fields depending on whether Latin or Cyrillic characters are entered
Good day to all
The old man IE does not cease to amaze us and throw up all the new problems in the most unexpected places.
When working on a project, I encountered an unexpected behavior of the input and textarea input fields when running IE in quirks mode. And all would be nothing, in general - anyone today surprised by the strangeness and bugs of IE. The interesting thing is under what conditions the problem manifests itself. This time it happens depending on which characters are entered in the input field - Cyrillic or Latin. Cyrillic causes a problem, the Latin is entered normally and the problem does not occur. It seemed to me quite interesting and I decided to share the observation with the public.
')
So, there is a html-document with the following content.
The quirks mode for display in IE6 / 7 is deliberately chosen, this is a necessary initial condition.
In words: there is a block of some given width (in% or px), which is additionally set to the indent to the right. Inside this block is an input or textarea input field.
It is known that in quirks mode, IE likes to count the width, including padding. In addition, it is known that in this mode, the dimensions of inline-elements react to the properties of width and height. Those. for input and textarea, you can specify the width, which is done: the width is given in% of the parent block. For clarity, let it be 100%. In line with this, the width of the nested input and textarea, until they are filled, is the width of the parent container minus its indent to the right.
Fun starts when trying to enter something in the field. With the introduction of Cyrillic characters in the input, the external indent of the container containing field disappears and the field “moves apart” to its full width. If you enter Latin characters - the problem does not appear. C textarea problem manifests itself regardless of whether Cyrillic characters are entered or Latin. This behavior is observed on IE6 / 7 under WinXP SP2.
Here is an image of what is happening:
How to get rid of this “driving around” input and textarea and with what such an “allergy” can be connected specifically to the Cyrillic characters remains a mystery to me. If someone tells you how to solve the problem I will be very grateful.
The old man IE does not cease to amaze us and throw up all the new problems in the most unexpected places.
When working on a project, I encountered an unexpected behavior of the input and textarea input fields when running IE in quirks mode. And all would be nothing, in general - anyone today surprised by the strangeness and bugs of IE. The interesting thing is under what conditions the problem manifests itself. This time it happens depending on which characters are entered in the input field - Cyrillic or Latin. Cyrillic causes a problem, the Latin is entered normally and the problem does not occur. It seemed to me quite interesting and I decided to share the observation with the public.
')
So, there is a html-document with the following content.
<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> The quirks mode for display in IE6 / 7 is deliberately chosen, this is a necessary initial condition.
In words: there is a block of some given width (in% or px), which is additionally set to the indent to the right. Inside this block is an input or textarea input field.
It is known that in quirks mode, IE likes to count the width, including padding. In addition, it is known that in this mode, the dimensions of inline-elements react to the properties of width and height. Those. for input and textarea, you can specify the width, which is done: the width is given in% of the parent block. For clarity, let it be 100%. In line with this, the width of the nested input and textarea, until they are filled, is the width of the parent container minus its indent to the right.
Fun starts when trying to enter something in the field. With the introduction of Cyrillic characters in the input, the external indent of the container containing field disappears and the field “moves apart” to its full width. If you enter Latin characters - the problem does not appear. C textarea problem manifests itself regardless of whether Cyrillic characters are entered or Latin. This behavior is observed on IE6 / 7 under WinXP SP2.
Here is an image of what is happening:
How to get rid of this “driving around” input and textarea and with what such an “allergy” can be connected specifically to the Cyrillic characters remains a mystery to me. If someone tells you how to solve the problem I will be very grateful.
Source: https://habr.com/ru/post/50036/
All Articles