Question

在我的网站上，我的背景图像在firefox上显示正常，但是在chrome上，两边都有大的白色框，当jquery图像幻灯片移动到下一个图像时，它们会消失。我将CSS中的背景图像链接到包含图像滑块的所有内容所在的正文。

这里是现场网站

http://wilsontsa.org/Technology%20courses/Technology%20Courses.html

HTML

<body>

<div id="bar">
</div>
<center>
<div id="pagecontainer">
<div id="container">
<div id="navigation">

<ul id="navigation">
<li id="techlink" class="dropdown"><a href="../Technology courses/Technology                 Courses.html" style="color:#046f83">Technology Courses</a>
<ul class="sub_navigation">
<li><a href="../Technology courses/Computer Science.html">&nbsp;Computer &nbsp;Science</a></li>
<li><a href="../Technology courses/Digital Video.html">&nbsp;&nbsp;&nbsp;&nbsp;Digital Video&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="../Technology Courses/Technology Innovation.html">Technology Innovation</a></li>
<br />
<li><a href="../Technology courses/Visual Design and Image Applications.html">Visual Design and Image App.</a></li>
<br />
<li><a href="../Technology courses/Web Design.html">Web Design</a></li>
</ul>
</li>
<li id="englink" class="dropdown"><a href="../Engineering Courses/Engineering Courses.html">Engineering Courses</a>
<ul class="sub_navigation">
<li><a href="../Engineering Courses/Introduction to Engineering and Design.html">Intro to Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Computer Integrated Manufacturing.html">Computer Integrated Manufact.</a></li>
<br />
<li><a href="../Engineering Courses/Principles of Engineering.html">Principles of Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Digital Electronics.html">Digital Electronics</a></li>
<br />
<li><a href="../Engineering Courses/Civil Engineering and Architecture.html">Civil Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Aerospace Engineering.html">Aerospace Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Engineering Design and Development.html">Engineering Design</a></li>
<br />
<li><a href="../Engineering Courses/I-Stem.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I-STEM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>
</li>
<li id="STEMlink"><a href="../STEM/stem.html">STEM</a></li>
<li id="weblink" class="dropdown"><a href="../Webmaster/Evolution.html">Webmaster</a>
<ul class="sub_navigation">
<li><a href="../Webmaster/Evolution.html">Evolution</a></li>
<li><a href="../Webmaster/Adapting.html">Adapting</a></li>
<li><a href="../Webmaster/Advertising.html">Business Model</a></li>
<li><a href="../Webmaster/Solution.html">Future</a></li>
</ul>
</li>

<div id="tsa" class="TSA">
  <li><a href="../TSA Chapter/TSA.html"><img  src="../Images/Design Images/TSA-LOGO.png" width="50" height="34" /></a></li>
  </div>
</ul>
</div> <!--navigation div --> 

</ul>
</center>

<div id="spacer">

<div id="wrapper">
<div>
<div class="slider-button" onclick="ss.move(-1)">&laquo;</div>
<div id="slideshow">
  <ul id="slides">
    <li><img src="../Javascript Photos/Picture1.png" width="900" height="300" alt="Coral Reef"></li>
    <li><img src="../Javascript Photos/Picture2.png" width="900" height="300" alt="Sea turtle">
    </li>
    <li><img src="../Javascript Photos/Picture3.png" width="900" height="450" alt="Coral Reef"></li>
    <li><img src="../Javascript Photos/Picture4.png" width="900" height="300" alt="Blue Fish"></li>
  </ul>
  </div>
  <div class="slider-button" onclick="ss.move(1)">&raquo;</div>
  </div>
  <ol id="pagination" class="pagination">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ol>
 </div>

CSS

body {
background-image: url(Images/Tech nology%20Images/bg_Tech.gif);}

滑块CSS

li.current {
background:#102c75;}


#slideshow {
float:left; 
width:900px; 
height:300px; 
border:2px solid #ccc; 
background:#fff;
position:relative;
top:16px;
z-index:-1;}



#slides {
position:relative; 
width:900px; 
height:300px; 
list-style:none; 
overflow:auto;
z-index:-1;}



#slides li {
width:900px; 
height:300px;}



.fader-slide {
opacity:0; 
position:absolute;}

.fader-fade {
opacity:1;
 -webkit-transition:opacity .4s; 
 -moz-transition:opacity .4s; 
 transition:opacity .4s;}



#content {
width:900px; 
height:270px; 
padding:15px 18px 15px 18px; 
background:#fff;}



#content h1 {
font:22px Georgia,Verdana; 
margin-bottom:15px; 
color:#036;}

#caption {
background:#fff; 
position:relative;}

#caption div {
position:absolute; 
bottom:0; 
left:0; 
width:900px; 
padding:15px 18px 10px 18px; 
background:#000; 
background:rgba(0,0,0,.7);}



#caption h2 {
font:18px Georgia,Verdana; 
margin-bottom:6px; 
color:#eee;}

#caption p {
line-height:1.4; 
color:#aaa;}

Answer 1

这不好：

body {
background-image: url(Images/Tech nology%20Images/bg_Tech.gif);}

首先，不推荐使用background-image。其次，由于缺少引号并且使用了空格，Chrome无法识别该网址。

（正确地说：/Tech nology%20Images/ - 看到那个空间？这是禁忌。％20也可以是禁忌。）

应该是这样的。

body {
    background:url('Images/TechnologyImages/bg_Tech.gif');
}

注意：要实现此目的，您必须将目录Technology Images重命名为TechnologyImages。无论如何你应该做什么，因为在目录名中有空格并不好。（或文件名，如果必须，请使用-或_。）

Answer 2

您使用过的幻灯片似乎打破了除了它似乎工作之外的其他东西。如果你看一下身体的高度，它似乎大约是90px。您可以使用jQuery将主体强制下移到页面底部，或者在页面底部放置一个CSS clear class。

背景图像在Firefox上显示正常但在chrome上不显示

2 个答案: