首先让我说一下我是如何成为网页设计的初学者,所以我的代码和网站可能有点乱(虽然我尝试干净的工作)。
我已成功将JQuery Cycle插件添加到我网站的主页,这在Chrome,Firefox中看起来很棒,甚至在我接受附加组件时也可以在IE9中使用。但是,当我在IE8上测试它时,没有要求加载插件,它显示的文本显示为黑色的常规字体,由于背景也是黑色,因此无法看到。
我认为问题出在IE8和CSS文件中,尽管我并不完全确定。我希望有一个解决方法。
的jquery-1.3.1.min.js
这是我的代码:
<div id="data" style="position: absolute; left: -12px; top: 237px; width: 775px; height: 556px; z-index: 11">
<div id="layer8" style="position: absolute; left: 13px; top: 3px; width: 760px; height: 456px; z-index: 17">
<div id="gallery">
<a href="#" class="show">
<img src="images/intro/Slide_1.jpg" alt="Flowing Rock" width="997" height="532" title="" alt="" rel="<h3intro>Great Neck - A Community of Luxury Homes</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_2.jpg" alt="Grass Blades" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro> KNOWLEDGE...</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_3.jpg" alt="Ladybug" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro> INTEGRITY...</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_4.jpg" alt="Lightning" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro> SERVICE...</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_5.jpg" alt="Lotus" width="997" height="532" title="" alt="" rel="<h3intro>We love what we sell...</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_6.jpg" alt="Mojave" width="997" height="532" title="" alt="" rel="<h3intro>And only sell what we love...</h3intro>"/>
</a>
<a href="#">
<img src="images/intro/Slide_7.jpg" alt="Pier" width="997" height="532" title="" alt="" rel="<h3intros>FIND </h3intros><h3intro>JANET ETESSAMI REALTY</h3intro>"/>
</a>
<div class="caption">
<div class="content">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
通过这个,我可以直接指向我应该放置的代码吗?
答案 0 :(得分:0)
过去几个小时我还在头撞墙,看到了你的帖子。将z-index添加到overlay css元素和幻灯片容器中为我修复了它。
示例:
为叠加CSS类添加更高的z-index编号。 为幻灯片显示的CSS容器使用较低的z-index编号。
<style>
.overlay-css
{
your css
z-index: 4;
}
.slideshow {
your css
z-index: 3;
}
</style>
<div id="slideshow-wrapper">
<div class="overlay-css">This is the text that appears over the slideshow.</div>
<div class="slideshow">
<img src="image1.jpg" width="100" height="100" alt="test-1"/>
<img src="image2.jpg" width="100" height="100" alt="test-2"/>
</div>
</div>