This particular inquiry pertains to a curious discrepancy in the computed height of an inline nonreplaced element across different web browsers. The question can be found here: Why the computed height of inline nonreplaced element differs between browsers?
In my case, I have an inline element where I apply a background color to create a highlighting effect (specifically for the legend of an image).
The challenge arises when trying to precisely control the rendering of the background height, given that font rendering varies among browsers. While slight differences are acceptable, what I really need is for the top of the first line background to align perfectly with an image on the left side. In the provided jsfiddle example, the white and blue backgrounds should align. Is there a way to achieve this alignment using CSS?
HTML
<div class="main">
<div class="float"></div>
<span>Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span>
</div>
CSS
div.main {
min-height: 100px;
background-color: red;
padding: 10px;
}
div.float {
min-height: 50px;
float: left;
width: 10px;
background-color: white;
}
span {
text-transform: uppercase;
line-height: 1.5;
background-color: blue;
padding-left: 10px;
padding-right: 10px;
}