Firefox 网站在不同浏览器/系统上的显示方式不同_Firefox_Google Chrome_Web

Firefox 网站在不同浏览器/系统上的显示方式不同

firefox google-chrome web

Firefox 网站在不同浏览器/系统上的显示方式不同,firefox,google-chrome,web,Firefox,Google Chrome,Web,对此完全困惑，因为代码似乎没有任何“错误”。我已经请了一些人来查看这个网站，我一直得到不同的答案。从加载时出现的滚动文本（我显然不想看到）到不显示图片：/ 有人能帮忙吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WEBSITE TITLE</title> <link rel="shortcut icon" href

对此完全困惑，因为代码似乎没有任何“错误”。我已经请了一些人来查看这个网站，我一直得到不同的答案。从加载时出现的滚动文本（我显然不想看到）到不显示图片：/

有人能帮忙吗

<!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@ADDRESS.COM">EMAIL@ADDRESS.COM</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>

我不确定到底是什么问题。我已经将它加载到JS Fiddle中，所以我们有一些东西要处理。你能告诉我更多关于这个问题的细节吗？如果它是特定于某一类型的浏览器

谢谢Justine-Chrome似乎引起了它的问题。我自己在这里安装了Chrome，页面首先加载白色背景，然后加载背景图像。此外，可以看到滚动文本在加载时滚动。不过，这在Firefox中并没有发生。嗨，约翰，你有没有把这个页面公开发布在某个地方，这样我就可以看到你的背景图片问题？谢谢Justine，Chrome似乎引起了它的问题。我自己在这里安装了Chrome，页面首先加载白色背景，然后加载背景图像。此外，可以看到滚动文本在加载时滚动。这在Firefox中并没有发生。嗨，John，你们有并没有公开发布这个页面，这样我就可以看到你们的背景图片问题？

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;
}