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

在不同的浏览器中查看我的网站时，我注意到一些差异。Safari和Chrome之间的字体大小和边距差异

这是Safari浏览器：

enter image description here

这是Chrome浏览器：

enter image description here

为什么在字体大小和利润率的差异？我已经试过像素，而不是时间，但没有奏效

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>

来源

2015-01-21 Ahmad Al-kheat

尝试在PX设置字体大小，而不是他们。 – Vivek 2015-01-21 05:59:14

我试过了，同样的问题。 – 2015-01-21 06:00:20

你可以分享网站或小提琴链接吗？ – 2015-01-21 06:16:48

原来我有不同的缩放级别。

来源

2015-01-21 06:37:42

你可以写你的CSS的克罗默和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; 
} 

}

来源

2015-01-21 07:07:27

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

回答

相关问题