1

我有一种情况，有时元素是在页面加载时加载的，有时它们是由 JavaScript 在以后生成的，那里没什么特别的。然而，动态生成的元素在 Chrome、FireFox 和 Safari 中的间距明显不同。

下面是一个 HTML 页面，其中一个元素块在页面加载时位于 DOM 中，而这些元素的精确副本在页面加载后由 JavaScript 添加。出于某种原因，尽管所有样式和布局都相同，但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

要么让javascript在div之间插入空格：

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

因为它们显示为 inline-block 换行符导致它们有空格

如果我将您的静态 div 更改为

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

空白消失

于 2013-03-28T21:16:47.643 回答