Alignement vertical différent entre Chrome et Firefox (blockquote:before)

Question

J'essaie de créer un style de citation de bloc purement CSS. Le problème est le suivant : le guillemet, créé avec blockquote:before, est aligné plus bas dans Chrome qu'il ne l'est dans Firefox et IE9. Toute aide est la bienvenue, je suis désemparé :(

JSFiddle : http://jsfiddle.net/w3A7h/3/

Existe-t-il un moyen simple de créer une règle CSS pour Chrome uniquement ?

Answer 1

La première chose à faire dans ce genre de situations est d'utiliser une réinitialiser la feuille de style pour que vos éléments soient rendus de manière plus identique entre les navigateurs par défaut. Cela vous fera gagner un temps fou en matière de débogage, car de nombreux problèmes de ce type disparaîtront.

Cela dit, essayez ceci :

http://jsfiddle.net/AWJyW/

J'ai modifié le style de citation qui, au lieu d'être positionné à l'extérieur du bloc de citations, est maintenant positionné avant le premier bloc de citations. <p> étiquette à l'intérieur. J'ai ensuite changé la position en position relative, je l'ai fait flotter à gauche et j'ai défini une marge négative pour éviter que le texte ne soit déformé. La raison pour laquelle cela fonctionne est que si Chrome et Firefox ne sont manifestement pas d'accord sur l'endroit où commencer les limites du positionnement absolu, ils sont d'accord sur l'emplacement des limites intérieures :

blockquote p:first-child:before {
        color: #ededed;
        content: "\201C";
        display: block;
        font-family: Georgia,serif;
        font-size: 110px;
        left: -56px;
        margin-right: -40px;
        position: relative;
        float: left;
        top: -30px;
    }