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

【问题标题】：background image displays fine on firefox but not on chrome背景图像在 Firefox 上显示正常，但在 chrome 上显示不正常
【发布时间】：2013-03-29 01:04:09
【问题描述】：

在我的网站上，我的背景图片在 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;}

【问题讨论】：

在我的 PC 上的 Chrome v25 中看起来不错。顺便说一句，您在页面上使用了 CENTER 标签，该标签现已弃用。
您的 NAV 页面上的 HTML 在 NAV 代码的末尾是一种损坏 - 检查一下。您还有一个 DIV 作为 UL 的子级，它不是有效的 HTML。您只能将 LI 元素作为 UL 或 OL 的子元素。

标签： jquery google-chrome firefox background-image

【解决方案1】：

这不好：

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

首先，不推荐使用背景图像。其次，由于缺少引号以及空格的使用，Chrome 将无法识别该 URL。

（就在上面写着：/Tech nology%20Images/ - 看到那个空格了吗？这是一个禁忌。%20 也可以是一个禁忌。）

它应该看起来像这样。

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

注意：为此，您必须将目录 Technology Images 重命名为 TechnologyImages。无论如何，您确实应该这样做，因为在目录名称中包含空格不是一个好习惯。（或文件名，就此而言。如果必须，请使用 - 或 _。）

【讨论】：

【解决方案2】：

您使用的幻灯片似乎破坏了某些东西，而不是它似乎正在工作。如果你看一下身体的高度，它似乎大约是 90 像素。你可以使用 jQuery 将 body 强制放到页面底部，或者在页面底部放置一个 CSS clear 类。

【讨论】：