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">

“＆GT;

</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*/

/* 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*/

请注意，由于几个原因，这仍然无法解析 - 首先，浮动是“左”还是“右”;你做不到“中心”。要使用浮点数，你需要做一些事情，比如“margin-left：50％;”其次，字体总是以某种方式设置样式 - 你不能将字体样式声明为“none”。我已经离开了上面的那些因为我不确定你想怎么处理它。

无论如何，您可以在PHP中基于浏览器分叉到不同的样式表;看到： http://php.about.com/od/learnphp/p/http_user_agent.htm

希望这有帮助！

-AE。

firefox中的javascript滑块问题

“＆GT;

1 个答案: