1

ページの読み込み時に要素が読み込まれることもあれば、後日 JavaScript によって生成されることもあります。ただし、動的に生成される要素の間隔は、Chrome、FireFox、および Safari で著しく異なります。

以下は、要素の 1 つのチャンクがページの読み込み時に DOM にあり、それらの要素の正確なコピーがページの読み込み後に JavaScript によって追加される HTML ページです。何らかの理由で、JS で追加された要素 ( 内のもの) は、すべてのスタイルとレイアウトが同じであるにもかかわらず、内の要素#added-lateとは異なるスタイルになっています。#exists-at-page-load

質問: 静的に生成された要素 ( の要素) の#exists-at-page-load周囲に余分なスペースがあるのはなぜですか?

<!DOCTYPE html>
<html>
    <style>
      .dark-section-header {
        background-color: #222;
        margin-bottom: 5px;
      }

      .dark-section-header div {
        display: inline-block;
        height: 30px;
        width: 20px;
        margin: 0;
        margin-left: 10px;
      }

      .dark-section-header .track-menu {
        outline: 1px dashed #f00;
      }

      .dark-section-header .play-button {
        outline: 1px dashed #0f0;
      }

      .dark-section-header .star-button {
        outline: 1px dashed #77f;
      }
    </style>

  </head>
  <body>
    <div id="exists-at-page-load">
      <div class="dark-section-header">
        <div class="play-button"></div>
        <div class="track-menu"></div>
        <div class="star-button"></div>
      </div>
    </div>

    <div id="added-late"></div>

    <script>
      setTimeout(function(){
        document.getElementById( 'added-late' ).innerHTML =
          '<div class="dark-section-header">' +
            '<div class="play-button"></div>' +
            '<div class="track-menu"></div>' +
            '<div class="star-button"></div>' +
          '</div>';
      }, 0 );
    </script>
  </body>
</html>
4

2 に答える 2

3

divの間にJavaScriptを挿入するか：

setTimeout(function(){
  document.getElementById( 'added-late' ).innerHTML =
    '<div class="dark-section-header"> ' +
      '<div class="play-button"></div> ' +
      '<div class="track-menu"></div> ' +
      '<div class="star-button"></div> ' +
    '</div>';
}, 0 );

または、HTML が次のことをしていないことを確認してください。

<div id="exists-at-page-load">
    <div class="dark-section-header">
        <div class="play-button"></div><!--
     --><div class="track-menu"></div><!--
     --><div class="star-button"></div>
    </div>
</div>

js とスペーシングのすべての組み合わせを次に示します。

于 2013-03-28T21:15:40.197 に答える
2

それらはインラインブロックとして表示されるため、改行により空白が発生しています

静的divを次のように変更すると

  <div class="play-button"></div><div class="track-menu"></div><div class="star-button"></div>

空白が消える

于 2013-03-28T21:16:47.643 に答える