我不明白爲什麼我的網頁在不同的瀏覽器呈現不同的結果

Question

我正在使用雅虎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正確propperty，它應該在這兩個瀏覽器被罰款，至少它的作品在我結束。

也可以考慮做這個佈局，而不是所有的東西都被絕對定位。

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