Custom styling of Wordpress more link displaying inconsistently between webkit and firefox

Question

So I am styling the Wordpress more link on the blog index page, and I've used some custom styles and markup that are displaying inconsistently between webkit based browsers (Safari and Chrome) and Firefox. All is well in Firefox, but in webkit it doesn't look as I'd like it to. I can't seem to find how to fix it in webkit.

The problem is that I have the more link text styled and then the end part wrapped in a span which I'm replacing with an arrow image, with the text floated left, and the arrow floated right. However, in the webkit browsers, the arrow span is not being styled inline with the text.

The markup looks like this:

<p>

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

    Read the rest of this entry 

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

  </a>

</p>

And the Styles look like this:

.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;
}

Feel free to view the actual live code as well here: http://cure.org/blog

Answer 1

Decided just to change the style of the span arrow from floated right to absolutely positioned and gave the anchor extra right padding to compensate. That seems to have worked just fine.

Answer 2

Just move span to the beginning of the link. Also it can help to fix almost the same problem in ie7.

<p>

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

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

        Read the rest of this entry 

    </a>

</p>

Answer 3

This could also have been done by making the arrow portion a background image on the link. Less code, less hassle, and no absolutely positioned minutia.