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

Question

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

这是Safari：

这是Chrome：

为什么字体大小和边距有差异？ 我尝试过像素代替em，但没有工作

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>

Answer 1

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

Answer 2

您可以通过以下方式为chrome和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;
}

}