網站在不同的瀏覽器/系統上顯示不同

對此完全混淆，因爲代碼似乎沒有任何「錯誤」。我已經請了幾個人來檢查網站，並且我不斷得到不同的答案。從滾動文本出現滾動加載（我明顯不希望）顯示沒有圖片：/網站在不同的瀏覽器/系統上顯示不同

任何人都能夠幫助嗎？

<!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<title>WEBSITE TITLE</title> 

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="/favicon.ico" type="image/x-icon"> 

<link rel="stylesheet" type="text/css" href="css/page.css"> 

</head> 
<body> 

<div id="container"> 

<h1>WEBSITE TITLE</h1> 
<h2><a href="mailto:[email protected]">[email protected]</a></h2> 

<ul id="arrows"> 
<li><a id="arrow1" href="http://www.facebook.com">Arrow<span></span></a></li> 
<li><a id="arrow2" href="http://twitter.com">Arrow2<span></span></a></li> 
</ul> 

<div id="photo01"></div> 

<div id="navcontainer"> 

<ul id="navlist"> 

<li><span>List</span><ul> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
<li><a href="#">7</a></li> 
<li><a href="#">8</a></li> 
<li><a href="#">9</a></li> 
<li><a href="#">10</a></li> 
<li><a href="#">11</a></li> 
<li><a href="#">12</a></li> 
<li><a href="#">13</a></li> 
<li><a href="#">14</a></li> 
<li><a href="#">15</a></li> 

</ul></li></ul> 
</div><!-- end #navcontainer --> 



</div><!-- end #container --> 

</body> 
</html>

而CSS是這樣的：

body { 
/*margin:0;*/  margin:10px; 
background-image:url(background.png); 
background-attachment:fixed; 
font-family:'hoefler text',georgia,'times new roman',serif; 
} 

a { 
color:#dadada; 
text-decoration:none; 
} 
a:visited,a:hover { 
color:#fff; 
} 
a:active { 
color:#000; 
} 
a { 
outline:0; 
} 

#container { 
/*width:1000px;*/      min-width:1000px; 
             padding-bottom:20px; 
/*margin:140px auto 0;*/ 
} 

div #photo01 
    {  
      float:left; 
    position:absolute; 
      width: 690px; 
      height: 550px; 
               margin-top:150px; 
               margin-bottom:20px; 
               margin-left:880px; 

      background-image: url(img_01.jpg); 
      background-repeat: no-repeat; 
      /*background-position: 200px 300px;*/ 
    } 

h1,h2 { 
position:absolute; 
/*top:225px;*/ top:235px; 
left:50px; 
z-index:2; 
/*width:1000px;*/ width:720px; 
padding-top:25px; 
margin:0; 
color:#dadada; 
font-weight:normal; 
font-size:1.85em; 
letter-spacing:0.2em; 
line-height:1.1em; 
text-transform:uppercase; 
background-image:url(background.png); 
} 
h2 { 
        width:500px;      
/*top:290px;*/  top:300px; 
padding-top:20px; 
font-size:1.0em; 
        background-image:url(background.png); 
} 

#arrows {      
float:left; 
width:64px; 
padding:0; 
/*margin-top:250px; 
margin-bottom:50px; 
margin-right:0px; 
margin-left:-150px;*/       margin-top:402px; 
               margin-bottom:200px; 
               margin-left:50px; 

list-style-type:none; 
} 
#arrows a { 
position:relative; 
display:block; 
width:64px; 
height:64px; 
/*margin-bottom:10px;*/margin-bottom:5px; 
text-indent:-9999px; 
overflow:hidden; 
background-image:url(arrows.png); 
} 
#arrows span { 
position:absolute; 
top:0; 
left:0; 
width:64px; 
height:64px; 
background-image:url(arrows.png); 
opacity:0; 
-webkit-transition:all 0.5s ease; 
-moz-transition:all 0.5s ease; 
-o-transition:all 0.5s ease; 
} 
#arrows span:hover { 
opacity:1; 
} 
#arrow1 { 
background-position:0 0; 
} 
#arrow1 span { 
background-position:0 -64px; 
} 
#arrow2 { 
background-position:-64px 0; 
} 
#arrow2 span { 
background-position:-64px -64px; 
} 

#navcontainer { 
clear:both; 
overflow-x:hidden; 
} 

#navlist { 
float:left; 
line-height:30px; 
padding:0; 
margin:0; 
list-style-type:none; 
color:#dadada; 
font-size:0.65em; 
letter-spacing:0.2em; 
line-height:1.1em; 
text-align:left; 
text-transform:uppercase; 
} 

#navlist:first-child { 
position:relative; 
cursor:pointer; 
} 

#navlist span { 
position:absolute; 
z-index:1; 
width:100px; 
line-height:40px; 
padding-left:50px; 
background-image:url(background.png); 
color:#dadada; 
} 

#navlist ul { 
padding:0; 
margin:0 0 0 -1300px; 
list-style-type:none; 
-webkit-transition:all 2s ease; 
-moz-transition:all 2s ease; 
-o-transition:all 2s ease; 
} 

#navlist ul li { 
float:left; 
margin:0 3px; 
} 

#navlist:first-child:hover ul{ 
margin:0 0 0 150px; 
color:#dadada; 
} 

#navlist a { 
display:block; 
line-height:40px; 
padding:0 8px; 
color:#dadada; 
-webkit-transition:all 0.5s ease; 
-moz-transition:all 0.5s ease; 
-o-transition:all 0.5s ease; 
} 

#navlist a:hover { 
color:#fff; 
}

來源

2012-06-25 John Byrne