title: IE's clear 'X' expands input on hover
body: <p>This is an odd one; I have a site in Quirks Mode (<code>X-UA-Compatible</code> as IE5), and a structure that is essentially the following (not my choice):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;td&gt;&lt;!-- part of a table-layout:fixed table --&gt;
    &lt;table style="width:100%"&gt;
      &lt;tr&gt;
        &lt;td style="width:100%"&gt;
          &lt;input type="text" style="width:100%"/&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="button" style="width:100px"/&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The idea is to, within the parent table cell, have a row containing a wide-as-possible text input, and a button to the right of that of fixed width.</p>
  
  <p>Pasting or typing in large text works fine, until you hover over the 'X' that IE adds to clear the text. At that point, despite the parent cell being restricted in size, the cell expands off-screen as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/hILAK.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hILAK.gif" alt="Example of input field expanding off screen"></a></p>
  
  <p>What's going on here, and can I stop it? I don't seem to be able to enforce the full width without this occurring. Unfortunately quirks mode isn't something I can change at this point, which means I can't even hide <code>::ms-clear</code> in the CSS.</p>