{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', '推荐 啃猪蹄的小仙女 的问题《Why the computed height of inline nonreplaced elem》','https://www.manongdao.com/q-1367500.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
According to the figure above(come from "CSS The Definitive Guide 3rd Edition"), the computed height of an inline box is equals to content area plus leading, if we didn't specify line-height, than the height will only determine by the content area.
Again according to "CSS The Definitive Guide 3rd Edition", user agent may choose one of the two ways to caculate the content area height:
In nonreplaced elements, the content area can be one of two things, and the CSS2.1 specification allows user agents to choose which one. The content area can be the box described by the em boxes of every character in the element strung together, or it can be the box described by the character glyphs in the element.
I use a simple page to test the inline element height caculation between browsers:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {
font-size: 15px;
}
</style>
</head>
<body>
<span>MERLIN</span>
</body>
</html>
And the result is listed below, the span height value is given by the browser developer tool.
- Chrome(23.0.1271.101): 15px
- Firefox(20.0): 16px
- Safari(6.0.3(8536.28.10)): 17px
(Specify the line-height to 15px explicitly is still lead to the same result)
Why the computed heights are different between all three browsers? according to the specification, there are only two ways a user agent can choose form(em box or character glyph).
Does this means there is no way i can control the height of an inline nonreplaced element?
But it also says:
So it's still not 100% clearly defined how the height should be calculated. Note that different browsers have different font rendering algorithms, which may also affect these calculations.