Safari和Chrome之间的字体大小和边距差异

I am noticing some differences when viewing my website in different browsers.

在不同浏览器中查看我的网站时,我注意到一些差异。

this is Safari :

这是Safari:

And this is Chrome :

这是Chrome:

Why are there differences in font size and margins? I have tried pixels instead of em but didn't work

为什么字体大小和边距有差异?我尝试过像素而不是em,但没有用

css code :

css代码:

* {
margin: 0;
padding: 0;
}

.image {
    width : 100%;
}

#container {
    position :relative;
    font-size: 100%;
}
.signup, .signin {
cursor:pointer;
width :15%;
height:7%;
background: #EB6553;
border: 1px solid #979797;
border-radius: 5px;
/* Sign up : */
font-family: AmericanTypewriter;
font-size: 3em;
color: #000000;
}

.signup {
    position:absolute;
    top :58.5%;
    left: 30%
}

.signin {
    position:absolute;
    top : 58.5%;
    right: 30%;
}

.facebook {
position:absolute;
top: 86%;
left:40%;
cursor:pointer;
width: 22%;
height:5.5%;
background: #415E9B;
border: 1px solid #979797;
border-radius: 5px;
/* Sign in with faceboo: */
font-family: AmericanTypewriter;
font-size: 2em;
color: #FFFFFF;
}

html :

<div id='container'>
    <%= image_tag('Group.jpg', class: 'image') %> <br/>

    <div id='buttons'>
        <%= button_to "Sign up",  new_user_registration_path, :method => :get, class: 'signup'%><br/>
        <%= button_to "Sign in with facebook", user_omniauth_authorize_path(:facebook), class: 'facebook' %><br/>
        <%= button_to "Log in",  new_user_session_path, class: 'signin', :method => :get %>
    </div>
</div>

2 个解决方案

#1

It turned out I had different zooming levels.

事实证明我有不同的缩放级别。

#2

You can write your css for crome and safari browser this way:

您可以通过以下方式为crome和safari浏览器编写css:

@media screen and (-webkit-min-device-pixel-ratio:0)
{



* {
margin: 0;
padding: 0;
}

.image {
    width : 100%;
}

#container {
    position :relative;
    font-size: 100%;
}
.signup, .signin {
cursor:pointer;
width :15%;
height:7%;
background: #EB6553;
border: 1px solid #979797;
border-radius: 5px;
/* Sign up : */
font-family: AmericanTypewriter;
font-size: 3em;
color: #000000;
}

.signup {
    position:absolute;
    top :58.5%;
    left: 30%
}

.signin {
    position:absolute;
    top : 58.5%;
    right: 30%;
}

.facebook {
position:absolute;
top: 86%;
left:40%;
cursor:pointer;
width: 22%;
height:5.5%;
background: #415E9B;
border: 1px solid #979797;
border-radius: 5px;
/* Sign in with faceboo: */
font-family: AmericanTypewriter;
font-size: 2em;
color: #FFFFFF;
}

}