0

私のウェブサイトでは、私の背景画像はFirefoxでは問題なく表示されますが、クロムでは側面に大きな白いボックスがあり、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;}
4

2 に答える 2

1

これはダメです:

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

まず、background-image の使用は非推奨です。第二に、スペースの使用と組み合わせた引用符がないため、Chrome はその URL を識別できません。

(それが言う場所: /Tech nology%20Images/- そのスペースを参照してください? それはノーノーです.%20 もノーノーになる可能性があります.)

このように見えるはずです。

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

注: これを機能させるには、ディレクトリの名前を に変更する必要がありTechnology ImagesますTechnologyImages。ディレクトリ名にスペースを含めることは良い習慣ではないため、とにかくこれを行う必要があります。(または、ファイル名。必要に応じて-orを使用し_てください。)

于 2013-03-28T17:04:09.100 に答える
0

あなたが使用したスライドショーは、機能しているように見えるだけでなく、何かを壊しているようです。本体の高さを見ると90pxくらいのようです。jQuery を使用して本文をページの下部に強制的に配置したり、ページの下部に CSS クリア クラスを配置したりできます。

于 2013-03-28T16:59:03.680 に答える