Is there any css text reset?

Question

Hi, I have this problem:

since you can see the left side, there is a screenshot of how it is in chrome, on the right side of firefox. text does not have the same height. html structure is simple. its just a div, which contains a set of fields in which the h1 tag is placed. around there is a 1px border. that the h1 tag has a height of 20 pixels and even a line height of 20 pixels. The next is the h2 tag with the same dimensions. the problem is the height of the text.

in firefox it seems to be 1px lower than in chrome and safari.

I am using css reset from eric meyers in my latest version. therefore, this should not be caused by this.

It would be great if someone had hints to help me.

Many thanks.

Answer 1

By default, line-to-line varies widely across browsers and across different font families with different font sizes. Setting explicit line height addresses that.

This is due to differences in how the browser handles the sub-pixel positioning of the text. If the line height is 20 pixels and the font size is 15 pixels, then the text should be located 2.5 pixels from the top of the line. Gecko actually does this, and WebKit simply rounds the position to whole pixels. In some cases, two approaches give answers that differ in pixel.

In any case, make sure that your drive is an integer (that is, the line height minus the font size is even) will make the rendering more consistent if you really need it.

Try the following:

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

---

Another possible solution:

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