title: Avoid unwanted scrolling triggered by keyboard navigation in IE?
body: <p>I have an HTML page in which there is a &lt;div> that contains content that is wider than itself; the excess is made invisible with the style "overflow: hidden;".</p>
  
  <p>There can be links in this content.  In IE8 (but not Firefox 3.6), if you use the keyboard (i.e., tab key) to set focus to a link that is clipped at the right edge, IE will scroll the entire div left far enough to make the whole link visible.  (The same thing happens with links on the left when they get focus, if the div has already been scrolled left -- it scrolls the contents right to make the entire link visible.)</p>
  
  <p>I can attempt to hide this undesired scrolling by setting the scrollLeft value on the div when it gets out of whack -- jQuery makes this easy.  But I would prefer, if possible, to use a style or setting to prevent the scrolling in the first place.  As mentioned, Firefox doesn't scroll a partially clipped link into view when it gets focus.  Ideally, IE should be made to behave the same way.</p>
  
  <p>Sample HTML below.  In IE, use Tab (or Shift+Tab) to set focus to each link in turn to see the contents of the box shift sideways.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Demo of undesired scrolling&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="http://www.w3.org"&gt;Before&lt;/a&gt;
      &lt;div style="width: 400px; border: 1px solid gray; overflow: hidden;"&gt;
          &lt;div&gt;
              &lt;div style="width: 450px; text-align: center;"&gt;
                  &lt;a href="http://www.w3.org"&gt;Somewhere in the middle&lt;/a&gt;
              &lt;/div&gt;
              &lt;div style="width: 450px; text-align: left;"&gt;
                  &lt;a href="http://www.w3.org"&gt;Over on the left&lt;/a&gt;
              &lt;/div&gt;
              &lt;div style="width: 450px; text-align: right;"&gt;
                  &lt;a href="http://www.w3.org"&gt;Over on the right&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a href="http://www.w3.org"&gt;After&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance for any insight!</p>