Firefox 中的 javascript 滑块问题

Question

我正在努力寻找任何地方的解决方案。我创建了一个在 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 .''); while ($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(); ?>

Answer 1

首先：

你的 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 要么是“left”，要么是“right”；你不能做到“居中”。要使用浮动来做到这一点，您需要执行诸如“margin-left: 50%;”之类的操作其次，字体总是以某种方式设置样式——你不能将 font-style 声明为“none”。我把这些留在了上面，因为我不确定你想如何处理这个问题。

无论如何，您可以在 PHP 中根据浏览器创建不同的样式表；看：
http://php.about.com/od/learnphp/p/http_user_agent.htm希望

这有帮助！

-æ。