Pourquoi les éléments JS ajoutés sont-ils différents de ceux au chargement de la page?

J'ai une situation où des éléments sont parfois chargés au chargement de la page, et parfois ils sont générés par JavaScript à une date ultérieure, rien d'extraordinaire. Cependant, les éléments générés dynamiquement sont espacés sensiblement différents dans Chrome, FireFox et Safari.Pourquoi les éléments JS ajoutés sont-ils différents de ceux au chargement de la page?

Ci-dessous est une page HTML où un morceau d'éléments est dans les DOM au chargement de la page et une copie exacte de ces éléments est ajoutée par JavaScript après chargement de la page. Pour une raison quelconque, les éléments ajoutés au JS (ceux de #added-late) sont différents de ceux du #exists-at-page-load, bien que le style et la disposition soient les mêmes.

Question: Pourquoi les éléments générés statiquement, ceux de #exists-at-page-load, ont-ils un espace supplémentaire autour d'eux?

<!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>

Source

2013-03-28 Oz.

[jsFiddle] (http : //jsfiddle.net/Wnr6z/) – Eric

Ou ont javascript insérer des espaces entre les divs:

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);

Ou vous assurer que votre HTML ne:

<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 toutes les combinaisons de js et de l'espacement.

Source

2013-03-28 21:15:40 Eric

Eh bien, putain. Le problème a commencé avec un modèle, donc je n'y ai même pas pensé. Il s'avère que le moteur de template sur le serveur était en train d'imprimer du html et que le client imprimait du html compact. Merci! –

Est allé avec une 5ème option: flotter les éléments. S'assurer qu'un espace supplémentaire n'existait pas ou n'existait pas autour des éléments était hackish, donc j'ai flotté les éléments laissés pour passer les espaces. –

Parce qu'ils sont affichés sous forme de ligne-bloc les sauts de ligne sont les obligeant à avoir des espaces

Si je change vos divs statiques pour

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

espaces en va

Source

2013-03-28 21:16:47 jsshah

Pourquoi les éléments JS ajoutés sont-ils différents de ceux au chargement de la page?

Répondre

Questions connexes