Question

对此完全感到困惑，因为代码似乎没有任何“错误”。我已经让一些人检查了网站，我不断得到不同的答案。从滚动文本开始，在加载时（我显然不想要）滚动显示没有显示图片：/

任何人都可以提供帮助吗？

<!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>

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

Answer 1

我不确定问题究竟是什么。我已将它加载到JS Fiddle中，因此我们可以使用它。你能否就这个问题向我提供更多细节？是否特定于某种类型的浏览器？

http://jsfiddle.net/eNyqK/

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

1 个答案: