Le style personnalisé de Wordpress plus de lien affichant de manière incohérente entre webkit et firefox

Question

Je crée donc le lien Wordpress plus sur la page d'index du blog, et j'ai utilisé des styles et balisages personnalisés qui apparaissent de manière incohérente entre les navigateurs webkit (Safari et Chrome) et Firefox. Tout va bien dans Firefox, mais dans webkit ça ne ressemble pas à ce que je voudrais. Je n'arrive pas à trouver comment le réparer dans webkit. Le problème est que j'ai plus de texte de lien stylisé et ensuite la partie finale enveloppée dans une travée que je remplace avec une image fléchée, avec le texte flottant à gauche, et la flèche flottait à droite. Toutefois, dans les navigateurs Webkit, la flèche n'est pas alignée avec le texte.

Le balisage ressemble à ceci:

<p> 

    <a href="http://link" class="more-link"> 

    Read the rest of this entry 

    <span class="arrow">&raquo;</span> 

    </a> 

</p> 

et les styles se présentent comme suit:

.entry p a.more-link { 
    display:block; 
    float:right; 
    margin:20px 0px 10px; 
    padding:3px 12px; 
    background:#6e5e4c; 
    color:#e6decc; 
    font-style:italic; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:14px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    line-height:20px; 
} 
.entry p a.more-link:hover { 
    background:#92d400; 
    color:#faf7ee; 
} 
.entry p a.more-link .arrow { 
    float:right; 
    display:block; 
    width:10px; 
    height:14px; 
    text-indent:-9999px; 
    background:url(/img/cure-sprite-main-v2.png) no-repeat -310px -195px; 
    margin-top:3px; 
    margin-left:10px; 
} 

Ne hésitez pas à voir le code en direct réel ainsi ici: http://cure.org/blog

Answer 1

Il suffit de déplacer l'intervalle jusqu'au début du lien. En outre, il peut aider à résoudre presque le même problème dans ie7.

<p> 

    <a href="http://link" class="more-link"> 

     <span class="arrow">&raquo;</span> 

     Read the rest of this entry 

    </a> 

</p> 

Answer 2

Décidé juste pour changer le style de la flèche de la portée flottante à la position absolue et a donné à l'ancre un rembourrage supplémentaire pour compenser. Cela semble avoir très bien fonctionné.

Answer 3

Cela aurait également pu être fait en faisant de la partie fléchée une image d'arrière-plan sur le lien. Moins de code, moins de tracas, et aucune minutie positionnée de manière absolue.