我无法弄清楚为什么我的页面在不同的浏览器中呈现不同的原因

Question

我正在使用Yahoo CSS重置，我的所有CSS都使用像素值而不是像ems这样的相对度量。 您会注意到包含表单的div的右下角在Chrome中从FireFox中移动。

检查出来： http://jsfiddle.net/rhewitt/anMmX/

铬：

火狐

/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}

body {
font-family:Georgia;
color:#93b9bb;
}

/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}

li a:hover {
text-decoration:underline;
color:#6b8f91;
}

/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}

#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;  
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}   

#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}

#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
    float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}

#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}

/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}

#subNav a{ 
color:#FFF;
}

#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}

#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}

#nav ul li:hover > ul {
display:block;
}

Answer 1

设置了浏览器的文字大小＆gt; 100％（不是页面缩放）。这导致渲染在我的机器上不稳定，也解释了为什么它不能被其他人复制。

Answer 2

我也无法复制差异。

您是否清除了Chrome中的缓存？尝试通过shift + f5重新加载。

我认为它应该看起来像第二个截图。

http://jsfiddle.net/xLTE4/

调整按钮css正确的属性，它在两个浏览器中应该没问题，至少它适用于我的最终。

也可以考虑在没有绝对定位的情况下进行此布局。

#submitBtn{
    position:absolute;
    right:45px;
    top:430px;
    width:80px;
}