为什么在 onBeforeDeactivate 事件处理程序中调用 focus() 时 DIV 会发生变化？答案

【问题标题】：Why DIV shifts when focus() is invoked in onBeforeDeactivate event handler?为什么在 onBeforeDeactivate 事件处理程序中调用 focus() 时 DIV 会发生变化？
【发布时间】：2009-04-13 03:37:08
【问题描述】：

我在 IE7/8 中遇到了一个网页的连线问题。页面配置为 dir="rtl"。并且 divRow 被制成非常大的 width 以使其包含的 div 不会换行。

单击编辑器区域，输入一些单词，然后单击“Hello world”文本。布局会变得乱七八糟，因为 divRow 类的 div 的偏移量和宽度发生了变化。

我想这是一个 IE7/8 错误。有没有办法解决这个问题？

基本上，divRow 必须使其包含的 div 不换行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <style>
    div 
    {
      border: 1px;
      border-color: black;
    }

    .divRow
    {
      /* this is to make its containing div not to wrap */
      min-width: 2000px; 
    }

    div.divEditor
    {
      width: 100%;
    }

    iframe
    {
      height: 100%;
      width: 100%;
    }
  </style>
  <script>
    function $(id)
    {
      return document.getElementById(id);
    }

    function focusToRight()
    {
      var elem = $("innerDiv1");

      function fcs()
      {
        elem.focus();
      }
      setTimeout(fcs, 1);

    }
  </script>
  </head>
  <body dir="rtl">
    <div>
    <div id='main' 
      style="overflow: hidden; position: relative; width=100%">
      <div class="divRow" id="firstRow">
        <div style='float:right' id='innerDiv1'>
          Hello world.
        </div>
        <div style='float:right' id='innerDiv2'>
          This is to make it is very very very very very very very very  
          very very very very very very very very long
        </div>
      </div>
      <div class="divEditor">
        <iframe id="editorIFrame" onbeforedeactivate="focusToRight();" 
          src="about:blank"></iframe>
      </div>
    </div>

    </div>
    <script>
      //document.getElementById('main').style.width='40px';
      //$("editorIFrame").document.designMode = "on";
      document.frames["editorIFrame"].document.designMode = "On";
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html internet-explorer focus right-to-left

【解决方案1】：

完全摆脱 min-width:2000px 条件。

阻止包含 div 包装或折叠的方法是在其末尾插入一个 style="clear:right" 的空 div。这个新的 div 仍然在包含的 div 中，但它必须清除，即低于浮动，因此它会拉伸 div 的垂直高度。

【讨论】：

我的代码看起来在 IE 和 Firefox 中都可以工作，但我被告知 Web 浏览器可能存在有关此 CSS 功能的错误。是真的吗？
ie6 在处理清除时可能会不时出现一些问题，但据我所知 ie7 已修复该问题。如果您发现 ie6 有任何问题，请尝试将 {width:auto;} 添加到清除 div