2

IE7/8 の Web ページで有線の問題が発生しました。dir="rtl"に設定されたページ。また、divRowは、含まれている 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>
4

1 に答える 1

2

min-width:2000px 条件を完全に取り除きます。

含まれている div の折り返しまたは折りたたみを停止する方法は、末尾の直前に style="clear:right" を指定して空の div を挿入することです。この新しい div はまだ含まれている div の中にありますが、フロートをクリアする、つまり下に移動する必要があるため、div の垂直方向の高さを引き伸ばします。

于 2009-04-13T10:53:00.223 に答える