Helvetica Neue baseline rendering problem with Firefox/Mac

Answer 1

My gut reaction is that the floats are misbehaving. I don't have a Mac, but can you try to do this:

<span>something1</span><span class="b">something2</span>
<span class="a">something3</span><span class="a b">something4</span>

And see if their baselines are correct?

Answer 2

Targeting the line-height can fix this, but not sure if it's the culprit. If you have CSSEdit (or refresh a lot) you can watch the behavior by incrementing the line-height 1px at a time.

The font-size 14px makes it near impossible. FF will drop the bold element 1 pixel at some line-heights and safari will drop it at the exact opposites! (i.e. line-height 20px safari drops the bold 1 pixel while firefox renders normally, the opposite of your problem).

Except at a 3 pixel line-height, both render the same. But a 3 pixel line-height is strange, you may need to accommodate by adjusting the margin-top if it goofs up your layout.

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 3px;
    float: left;
    margin-top: 9px;
}

At a font-size of 13px everything renders the same in both at a 21px line-height (which is closer to a regular line-height.

Playing with different font-sizes and line-heights I'm sure you'll find what you need.

Or hack it, if that's how you roll:

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 21px;
    float: left;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari 3.0 and Chrome rules here */

    .a {
     line-height: 20px;
    }

}