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

您可以这样编写您的 css for chrome 和 safari 浏览器：

@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;
}

}

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

font size and margin differences between Safari and Chrome

css

safari

google-chrome

cross-browser