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

【问题标题】：I can't figure out why my page is rendering differently in different browsers我无法弄清楚为什么我的页面在不同的浏览器中呈现不同
【发布时间】：2013-02-27 07:27:45
【问题描述】：

我正在使用 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;
}

【问题讨论】：

左下角还是右下角？
我无法复制此错误，即使您的代码未受影响 - 您是否有一个实时网页，缺少一些资源，可能有助于查看发生了什么？
右下角，对不起！我在 LAMP -> localhost 上运行它；尚未生产。所有资源都包含在 jsfiddle 中，我无法在这里格式化 html - 还没有 jscript。
所以我看到这里发生了一些事情。对我来说，我在 Firefox 和 Chrome 中看到了与您的 Chrome 屏幕截图相同的行为。如果您要将 right: 22px; 添加到您的 #form 选择器中，它会帮助您的表单元素正确对齐，但是由于其他怪异，您的布局的其他部分可能仍然存在问题 :)
我要拨弄你的小提琴，看看我能不能控制一些风格。希望你不介意:)

标签： css cross-browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

我也无法复制差异。

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

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

http://jsfiddle.net/xLTE4/

调整按钮 css right 属性，在两个浏览器中都应该没问题，至少它在我这边工作。

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

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

【讨论】：

清除了缓存——结果相同。你对定位有什么建议？浮动？这是我的第一个项目，所以我非常愿意接受建议。
这听起来像是试图与 OP 展开讨论。这个答案到底是什么？
@sparky 我已经包含了可以解决问题的代码。也许读？
是的，我会用浮动而不是绝对位置来做到这一点。您可以将大部分图形制作成单个背景图像，然后定位表单字段，将标签浮动到输入，然后使用边距定位表单元素。
是的，我看了，但你显然没看懂我的评论，所以又来了：你的回答是一系列问题和建议，而不是简洁的解决方案 i> 问题。这不是一个讨论论坛。