CODEWITHSUNDEEP
csssafari
user3891939
user3891939

Reputation:

Line height issue in safari

There is a certain amount of line height issue in safari.

The text moves 3-4px upwards in safari as compared to chrome, Firefox and explorer.

What can be done for safari, so that everything is rendered correctly.

line-height : normal is not working.

Upvotes: 1

Views: 10899

Answers (2)

Muzamil
Muzamil

Reputation: 1

This code is only used in safari. Now, you can adjust your line height on safari as you want.

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .class {
        padding: 0px 0px 30px 0px;
    }
}}

Upvotes: 0

Evgenia
Evgenia

Reputation: 268

I had the same issue with inline-block element. I tried a lot of things - tweaking the line-height, pre-setting the vertical-alignment to middle or bottom and even changed the parent to display:flex to center the inner elements with justify-content:center. It took me almost whole day to find out that the problem was not the CSS, not even the browser itself but the font I'm using and the OS. I'm using Helvetica Neue which turns out to be quite annoying when you want to have your glyphs vertically centered on Mac OS. The same works correctly on Windows.

I highly recommend this stackoverflow post for anyone that struggles with font rendering discrepancies on Mac.

Cheers!

Upvotes: 6

Related Questions