La définition de innerHTML entre la chaîne vide et la chaîne complète dans WebKit sur les éléments flottants provoque un débordement

Je vois ce problème où si je bascule le innerHTML d'un élément flottant ou d'un élément imbriqué à l'intérieur d'un, il flotte à l'extérieur du conteneur une fois que je bascule retour d'une chaîne vide à n'importe quel texte ou balisage. Bizarrement, dans l'exemple ci-dessous, si je supprime la transformation textuelle du CSS en ligne, le problème disparaît.La définition de innerHTML entre la chaîne vide et la chaîne complète dans WebKit sur les éléments flottants provoque un débordement

Cela se produit dans Chrome 9.0.597.19 et Safari 5.0.3 (WebKit version 6533.19.4) dans OS X 10.6.5.

Des idées s'il s'agit d'un bug WebKit ou autre chose?

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Safari Float Bug</title> 

<style type="text/css"> 
     .titlebar { 
      background: #eee; 
      width: 400px; 
      padding: 10px; 
      text-transform: uppercase; /* If you remove this line, the right side link no longer floats outside the container. */ 
     } 
</style> 

</head> 

<body> 
    <p> 
     <a href="#" id="clicked">Clicker</a> 
    </p> 

    <div class="titlebar"> 

     <span style="float: left;">Title</span> 
     <a href="#" id="rightlink" style="float: right;">Right Side Link</a> 

     <br style="clear: both;" /> 
    </div> 

    <script type="text/javascript"> 

     function toggler() { 
      var rightlink = document.getElementById("rightlink"); 
      if (rightlink.innerHTML == "") { 
       rightlink.innerHTML = "Right Side Link"; 
       } 
      else { 
       rightlink.innerHTML = ""; 
      } 
     } 

     document.getElementById("clicked").addEventListener("click", toggler, false); 
    </script> 

</body> 
</html>

Source

2010-12-15 chimerical

Avez-vous essayé d'ajouter manuellement les mots "RIGHT SIDE LINK" au lieu de les mettre en majuscule? Il se peut que la police que vous affichez (dans Webkit) fasse en sorte que vos majuscules occupent plus d'espace et transgressent les limites du conteneur. Vous devrez peut-être définir une limite de caractères sur le lien ou créer ajouter display:block à votre CSS pour la balise d'ancrage.

Source

2010-12-15 20:09:27 acconrad

Eh bien, les détails mineurs, mais la valeur "en majuscules" se réfère au cas de la phrase. Mais même si je mets "majuscule" ou "minuscule", cela ne fait pas de différence. Il y a probablement assez de place car cela se comporte très bien dans d'autres navigateurs comme Firefox. – chimerical

Bien sûr, cela ressemble à un bug. J'ai recherché bugzilla de webkit et je n'ai pas trouvé de rapport pour cela, donc vous pouvez vouloir le signaler. Basé sur la réponse de Scott: vous pouvez contourner le problème en y plaçant une étiquette vide au lieu de la vider.

function toggler() { 
    var rightlink = document.getElementById("rightlink"); 
    if (rightlink.innerHTML == "<b></b>") { 
     rightlink.innerHTML = "Right Side Link"; 
     } 
    else { 
     rightlink.innerHTML = "<b></b>"; 
    } 
}

Source

2010-12-22 03:20:56 Hemlock

La définition de innerHTML entre la chaîne vide et la chaîne complète dans WebKit sur les éléments flottants provoque un débordement

Répondre

Questions connexes