Почему DIV сдвигается, когда focus () вызывается в обработчике события onBeforeDeactivate? - PullRequest
Новая
       15

Почему DIV сдвигается, когда focus () вызывается в обработчике события onBeforeDeactivate?

2 голосов
/ 13 апреля 2009

Я столкнулся с проблемой проводной связи для веб-страницы в IE7 / 8. Страница настроена на dir = "rtl" . И divRow сделан очень большим ширина , так как содержащий его div не переносится.

Щелкните область редактора, введите несколько слов, затем нажмите текст «Hello world». Раскладка окажется грязной, потому что смещение и ширина div с divRow class изменились.

Полагаю, это ошибка 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>

1 Ответ

2 голосов
/ 13 апреля 2009

Полностью избавьтесь от условия min-width: 2000px.

Чтобы не допустить обтекания или свертывания содержащего элемента div, можно вставить пустой элемент div с style = "clear: right" непосредственно перед его концом. Этот новый div все еще находится внутри содержащего div, но он должен очистить, т. Е. Перейти ниже, плавает, поэтому он растягивает вертикальную высоту div.

...