title: Textbox's width and height is reduced by IE11
body: <p>In the IE11 developer tools, the layout has the width and height of the text box different from the code</p>
  
  <p><a href="https://i.stack.imgur.com/svov4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/svov4.png" alt="IE11"></a></p>
  
  <p>In the code the width and height properties are set to <code>width:196</code> and <code>height:22</code>. However, IE11 computes it differently, width=192 and height=16 as shown in the above picture. On the contrary, the height and width are computed exactly the same as in the code by IE9 which is <code>width:196</code> and <code>height:22</code>. See the picture below.</p>
  
  <p><a href="https://i.stack.imgur.com/ZU6S3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZU6S3.png" alt="IE9"></a></p>
  
  <p>Also, the padding and border are computed differently in IE11.
  The HTML code is rendered as expected in IE9 but in IE11, the textbox moves leftwards. Why? How can I make the same code run in IE11 without turning on the compatibility mode?</p>
  
  <p>The application is IE9 compatible, trying to run it on IE11 but facing such display issues.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;xxxx&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form style="position:absolute; top:0; left: 0;""&gt;
              &lt;pre&gt;
                  &lt;span style="font-size:12pt;color:black;height:13"&gt;
                      &lt;label style="position:absolute;left:180;top:312;"&gt;    Aaaaaaax  N/A  Baaaaaa:                         (+/-) (Kxx.)&lt;/label&gt;
                  &lt;/span&gt;
                  &lt;span style=";font-size:12pt;color:black;background-color:white;height:15;text-align:right"&gt;
                      &lt;input name=XX type=text value="#0.00" maxlength=19 title="XX" style="position:absolute;left:420;top:309;width:196;font-size:12pt;color:black;height:22;text-align:right"&gt;&lt;/input&gt;
                  &lt;/span&gt;
              &lt;/pre&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The answer to which my question is tagged for duplicate doesn't answer why the width of the textbox is reduced in IE11.</p>