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.

Answers


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.


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.


Need Your Help

setting .zshrc for arq jena

osx-mavericks jena zshrc arq

I'm trying to set my .zshrc file to export ARQROOT for ARQ (jena) on a mac (mavericks), similar to what is shown on http://jena.sourceforge.net/ARQ/Tutorial/query1.html for windows and linux

DEBUG directive not working

vb.net asp.net-mvc-4 compiler-directives

In my .NET MVC 4 site I use #If DEBUG Then in a few places. Lately I've noticed that there seems to be some issues with the DEBUG variable. This issue keeps happening