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

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

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

Answer 2

我也无法复制差异。

你清除了chrome中的缓存吗？尝试按 shift+f5 重新加载。

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

http://jsfiddle.net/xLTE4/

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

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

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