0

我正在努力在任何地方找到解决方案。我创建了一个在 Safari 中完美运行的滑块,但是当我在 Firefox 中查看它时,滑块图像 1 在滑块图像 2 和 2 与 3 之间没有边距,依此类推。创建一系列不太适合滑块窗口的图像(几乎就像楼层之间随机点的电梯开口)。

我遇到的第二个问题是将滑块图像创建为链接,而 .content h2 标题只是链接。

滑块位于 Wordpress Epione 主题中。

任何帮助将不胜感激

这是我的CSS-

/*SLIDER*/

#sliderwrap{float:left; width:auto; height:auto; background:none; margin-left:0px;        margin-top:px; position:; z-index:3;}

.slidercontent{ margin-top:20px;width:auto; height:auto;}

#slider{ margin-left:0px; margin-top:0px; width:auto; height:auto;}



.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: 'helvetica;      colour:#00000; font-size:10px; margin-bottom:15px; margin-top:20px;display:}

.content h2 a{ color:#00000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}



#slider img{width:auto; height:auto; ; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; float:center; ; height:auto; float:center; position:; z-index:0; margin-top:12px; margin-left:60px;}


.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}



/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  


#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

以及 .php 出现的首页

<?php get_header(); ?>



<!--SLIDER-->

<div id="sliderwrap">
    query('category_name='.$slidecat.'&showposts='.$slidenum.''); 而 ($sliders->have_posts()) : $sliders->the_post(); ?>
  • ">

</div>

<div class="sl_control"></div>

<!--SLIDER END-->



<!--CONTENT-->

















</div>

</div>

<!--CONTENT END-->





<!--SIDEBAR-->



<?php get_sidebar(); ?>



<!--SIDEBAR END-->



</div>

<!--Footer-->

<?php get_footer(); ?>
4

1 回答 1

0

首先:

您的 CSS 未通过验证,我猜 Firefox 在解析它时遇到了问题。尝试将该片段复制并粘贴到http://jigsaw.w3.org/css-validator/以了解我的意思。下面是一些(有些)更正的 CSS:

/* SLIDER */


#sliderwrap {float: left; width: auto; height: auto; background: none; margin-left: 0px; z-index: 3;}

.slidercontent {margin-top:20px; width:auto; height:auto;}

#slider {margin-left: 0px; margin-top: 0px; width: auto; height: auto;}

.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: sans-serif;      colour: #000000; font-size:10px; margin-bottom:15px; margin-top:20px;}

.content h2 a{ color:#000000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}

#slider img{width:auto; height:auto; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; height:auto; float:center; z-index:0; margin-top:12px; margin-left:60px;}

.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}


/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px;} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  

#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

请注意,由于几个原因,这仍然无法解析——首先,float 是“左”或“右”;你不能做到“中心”。要使用浮点数做到这一点,您需要执行“margin-left: 50%;”之类的操作。其次,字体总是以某种方式设置样式——你不能将字体样式声明为“无”。我把那些留在上面是因为我不确定你想如何处理它。

无论如何,您可以在 PHP 中根据浏览器分叉到不同的样式表;见: http: //php.about.com/od/learnphp/p/http_user_agent.htm

希望这可以帮助!

-æ。

于 2010-11-24T01:02:51.933 回答