爲什麼添加JS的元素與頁面加載時的元素不同？

我有一種情況，有時元素在頁面加載時加載，有時它們是在稍後的日期由JavaScript生成的，沒有什麼特別。但是，Chrome，FireFox和Safari中動態生成的元素間隔明顯不同。爲什麼添加JS的元素與頁面加載時的元素不同？

下面是一個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>

來源

2013-03-28 Oz.

[的jsfiddle]（HTTP ：//jsfiddle.net/Wnr6z/） – Eric

要麼有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>

Here's的JS和間距每個組合。

來源

2013-03-28 21:15:40 Eric

那該死的。問題始於模板，所以我甚至都沒有想過。原來在服務器上的模板引擎打印出漂亮的html，並且客戶端正在打印緊湊的html。謝謝！ –

第五種選擇：浮動元素。確保元素周圍有或沒有存在的額外空間感到駭人聽聞，所以我將剩下的元素浮動以穿過空間。 –

因爲它們顯示爲inline-block的換行符是造成他們有空白

如果我改變你的靜態的div到

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

空白消失

來源

2013-03-28 21:16:47 jsshah

爲什麼添加JS的元素與頁面加載時的元素不同？

回答

相關問題