CODEWITHSUNDEEP
htmlcssgoogle-chromesafari
user1679941
user1679941

Reputation:

0.1 rem border-width renders differently on chrome and safari

In my application I am setting:

html {
    font-family: 'Source Sans Pro',"Helvetica Neue",sans-serif;
}

I set border width to 0.1rem and now I noticed that in Chrome this sets the width to 1.6px and in Safari it sets it to 1px.

The text in Safari and Chrome appears the same size so why does the width of the lines render differently?

I saw on some web sites the setting font-size: 100%. As a good practice should I be setting this?

One more question. Is it a bad practice for me to set my border widths with rem in this way? I was using rem as everything in the application uses rem and I wanted to keep things the same.

Upvotes: 0

Views: 3319

Answers (2)

Rovi
Rovi

Reputation: 259

Usually what is noticed is that if the border width is <=1px, it is better to give it as 1px. As rem would make it a very small value. Some of the browsers don't render this value.

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

If you want rem measurements to be relative to a specific pixel size then you need to specify that size for the font-size property of your html tag. Without doing that, rem measurements will be relative to the default font size specified in each individual browser's settings.

html{
    font-size:16px;
}
p{
    border-width:.1rem; /* =1.6px */
}

Also, consider the fact that different browsers round numbers differently.

Upvotes: 1

Related Questions