is there a css text reset?

Question

hello i have this problem:

as you can see the left hand side there is a screenshot of how it is in chrome, right hand side firefox. the text has not the same height. the structure of the html is quiet simple. its just a div in which is a fieldset in that is placed a h1 tag. around that there is a border of 1px. that h1 tag has a height of 20px and even a line-height of 20px. next is a h2 tag with the same sizes. the problem is the text-height.

in firefox it seems that this is 1px lower than in chrome and safari.

i'm using a css reset from eric meyers in its latest version. so it should not beeing caused by that.

it would be great if someone have hints to help me out.

thanks alot.

Answer 1

The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.

This is due to differences in how browsers handle subpixel text positioning. If your line-height is 20 pixels but font-size is 15 pixels, then the text needs to be positioned 2.5 pixels from the top of the line box. Gecko actually does that and WebKit just rounds positions to integer pixels. In some cases, the two approaches give answers that differ by a pixel.

In any case, making sure that your half-leading is an integer (i.e. that line-height minus font-size is even) will make the rendering more consistent if you really need that.

Try this:

div h1 {
  -webkit-padding-before: 1px;
}

---

Another possible solution:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div h1 {
        line-height:19px;
    }
}