{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Evening l夕情丶 的问题《Helvetica Neue baseline rendering problem with Fir》','https://www.manongdao.com/q-1005722.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Consider this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height:20px;
font-size:14px;
}
.a {
float:left;
}
.b {
font-weight:bold;
}
</style>
</head>
<body>
<div class="a">something1</div>
<div class="a b">something2</div>
</body>
</html>
On all browsers but Firefox/Mac, it renders correctly, i.e bold and non-bold text are on the same baseline.
On Firefox/Mac, there is a 1px baseline difference between the bold and non-bold texts. See below for screenshot. Left is Safari 3.2.3, right is Firefox 3.0.10.
alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png
Is there any way to fix this e.g with some CSS, other than to go quietly cry in the corner and use Arial (which I'd not want to do — I'd stay with Helvetica Neue if I could).
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.
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:
My gut reaction is that the floats are misbehaving. I don't have a Mac, but can you try to do this:
And see if their baselines are correct?