背景圖像在Firefox上顯示效果很好，但不是在Chrome上

在我的網站上，我的背景圖像在Firefox上顯示效果很好，但在Chrome上，兩側有大型白色框，當jQuery圖像滑動移動到下一個圖像時，將CSS中的背景圖像鏈接到我的所有內容所在的主體，包括圖像滑塊。背景圖像在Firefox上顯示效果很好，但不是在Chrome上

這裏是Live網站

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

來源

2013-03-28 user2216672

在我的電腦上，Chrome v25的外觀很好。順便說一下，您正在使用您的頁面上的CENTER標記，現在已棄用。 –

您的NAV頁面上的HTML是NAV代碼末尾的一種破碎 - 請檢查一下。您還有一個DIV，作爲UL無效的孩子，它不是有效的HTML。您只能將LI元素作爲UL或OL的子元素。 –

你已經使用的幻燈片似乎打破以外，它似乎是工作以外的東西。如果你看看身體的高度，它似乎約爲90px。您可以使用jQuery將頁面底部的頁面強制到頁面底部，或者在頁面底部放置一個CSS清除類。

來源

2013-03-28 16:59:03 Andrew

這是沒有好：

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

首先，使用背景圖片已被棄用。其次，由於缺乏引用以及空間的使用，Chrome無法識別該網址。

（右的地方說：/Tech nology%20Images/ - 看到空間這是一個禁忌的20％可以是一個沒有沒有，太？）

它應該是這樣的。

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

注：對於這個工作，你將不得不Technology Images目錄命名爲TechnologyImages。無論如何，你真的應該這樣做，因爲在目錄名中有空格是不好的做法。（或文件名稱，如果必須，請使用-或_）。

來源

2013-03-28 17:04:09 Leng

背景圖像在Firefox上顯示效果很好，但不是在Chrome上

回答

相關問題