Prettify mettant en évidence dans une PRE avec white-space: nowrap est une ligne dans IE

Question

Dans Internet Explorer, un PRE avec un style de white-space:nowrap est à l'origine du code dans le PRE être en une seule ligne lorsque j'utilise enjoliver ( http://code.google.com/p/google-code-prettify/ ).

Est-ce pas un <br/> est censé provoquer une nouvelle ligne dans une PRE? J'ai vérifié la source HTML généré par Prettify fois la page chargée et il génère <br/> lorsqu'il rencontre des sauts de ligne.

Voir http: // blog. mikecouturier.com/2009/12/google-street-view-with-google-maps_27.html pour un exemple.

Cela ne se produit pas dans FF, ni Chrome.

Merci

EDIT: Peut-être que cela est lié à ceci: Insertion d'un saut de ligne dans une balise avant (IE, Javascript)

Answer 1

De L'Internet Explorer innerHTML Quirk :

  

La propriété innerHTML de HTML   éléments est bien connu et largement   utilisé. Il est capable de régler la   le contenu complet d'un élément dans une   aller, y compris les éléments et similaires.   Comme le Quirksmode   des tests   ont montré, innerHTML est le plus rapide   façon de modifier dynamiquement la page   contenu.

     

Cependant, innerHTML a un problème   Internet Explorer.

     

La norme HTML nécessite une   transformation sur l'affichage du contenu.   Tous les types et les quantités de côté   les espaces sont regroupées en une seule   espace. Ceci est une bonne chose - tout comme   Par exemple, il me permet d'ajouter beaucoup   de sauts de ligne dans ce fichier source   sans avoir à se soucier bizarre   sauts de ligne dans le texte affiché.

     

Internet Explorer applique ces   transformations sur l'affectation à la   propriété innerHTML. Cela semble être un   bonne idée: il permet d'économiser un peu de temps   lors de l'affichage, parce que si le   représentation en mémoire est déjà   normalisé, le navigateur ne fonctionne pas   doivent normaliser chaque fois qu'il doit   afficher le texte.

     

Il y a des exceptions à la   règle de normalisation, cependant. notamment,   ce sont l'élément de <textarea>,   l'élément <pre> et, en conscience CSS   les navigateurs, les éléments avec une valeur quelconque mais   normal pour la propriété white-space.

     

Internet Explorer ne respecte pas   ces cas particuliers. La troisième marques   leur optimisation une mauvaise idée, parce que   Espace blanc pourrait changer lors de l'exécution,   par exemple à travers les DOM. Dans tous   cas, Internet Explorer normalisera   toutes les affectations à l'innerHTML   propriété.

Ceci est un autre IE uniquement « bug » (même si ce sont eux qui ont inventé innerHTML). Dans le premier lien que vous avez des solutions à ce problème, mais comme Lucas a souligné tout semble pointer vers le code de Google que vous ne contrôlez pas.

Answer 2

Hey litb, tu as raison, dans les versions IE6 et IE7 le code de la balise pre est affichée sur la ligne 1. J'ai ajouté ce petit correctif pour les navigateurs IE6 et 7 uniquement.

Je l'ai testé et il fonctionne très bien, il est un peu hacky parce que je remplace en fait les balises <br> avec des balises <p>, mais cela ne cause pas de différence visuelle dans le IE6 et 7 navigateurs.

Vous pouvez ajouter ce bout de code importe où sur votre page HTML. Il utilise jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    // this BR issue seems to happen only in browser
    // msie version 6.0 and 7.0
    if($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")) {

        // replace all <br>s in the .prettyprint section
        // with <p> tags. <p> tags have the same visual behavior as <br> tags
        // in IE 6 and 7
        $(".prettyprint br").each(function(){
            $(this).replaceWith($("<p></p>"));
        });

    }

});
</script>

Ceci est probablement votre meilleure option jusqu'à ce que Google fixe leur code Prettify pour IE6 et 7.