投幣滑條無法正確顯示按鈕（Chrome除外）

Question

不知道為什么會發生這種情況，如果我轉到IE或Firefox中的投幣滑塊頁面，則JavaScript可以正常工作，但是一旦將其應用於站點的本地版本，它將按鈕顯示為數字，並且不顯示背景框滑塊標題。

不過，它在Google Chrome瀏覽器中完美運行。 我已經三重檢查了我的html和CSS，它看起來正確，有什么想法嗎？

它在Chrome中的顯示方式以及在IE / Firefox中的顯示方式（將鼠標懸停在第二個圖像的圓圈上）。

<html>
<head>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="coin-slider.min.js"></script>

    <link rel="stylesheet" type="type/css" href="coin-slider-styles.css">       
</head>
<body>

<div id="container">

    <div id="coin-slider">
        <a href="group.html">
            <img src="img/sliderGroup.jpg">
            <span>
                heading1 
            </span>
        </a>
        <a href="plan.html">
            <img src="img/sliderPlan.jpg">
            <span>
                heading2
            </span>
        </a>
        <a href="num.html" >
            <img src="img/sliderNum.jpg">
            <span>
                heading3
            </span>
        </a>
        <a href="exp.html" >
            <img src="img/sliderExp.jpg">
            <span>
                heading4
            </span>
        </a>
        <a href="rep.html">
            <img src="img/sliderRep.jpg">
            <span>
                heading5
            </span>
        </a>

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({width:800, height:300,  spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
    });
</script>
</body>

.coin-slider { 
    overflow: hidden;
    zoom: 1;
    position: relative;
    }

.coin-slider a{
    text-decoration: none;
    outline: none;
    border: none;
    }

.cs-buttons {
    font-size: 0px;
    padding: 10px;
    float: left;
    }

.cs-buttons a {
    margin-left: 5px;
    height: 10px;
    width: 10px;
    float: left;
    border: 1px solid #B8C4CF; 
    border-radius: 100%;
    color: #B8C4CF;
    text-indent: -1000px;
    }

.cs-active {
    background-color: #454545;
    color: #FFFFFF;
    }

.cs-title {
    width: 780px; 
    padding: 10px;
    background-color: #454545; 
    color: #FFFFFF; 
    font-size: 13px;
    }

.cs-prev, .cs-next {
    background-color: #454545;
    color: #FFFFFF;
    padding: 0 10px 0 0;
    }

Answer 1

在這里它在http://jsfiddle.net/sarath704/cgU9R/中正常工作

一次檢查哪里有問題

<!DOCTYPE html>
<html>
<head>

<script>
  $(document).ready(function() {
       $('#coin-slider').coinslider({width:800, height:300,  spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
    });

</script>
<style>
.coin-slider { 
    overflow: hidden;
    zoom: 1;
    position: relative;
    }

.coin-slider a{
    text-decoration: none;
    outline: none;
    border: none;
    }

.cs-buttons {
    font-size: 0px;
    padding: 10px;
    float: left;
    }

.cs-buttons a {
    margin-left: 5px;
    height: 10px;
    width: 10px;
    float: left;
    border: 1px solid #B8C4CF; 
    border-radius: 100%;
    color: #B8C4CF;
    text-indent: -1000px;
    }

.cs-active {
    background-color: #454545;
    color: #FFFFFF;
    }

</style>
</head>
<body>
<div id="container">

    <div id="coin-slider">
        <a href="group.html">
           <img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" alt="Mini Ninjas" />
            <span>
                heading1 
            </span>
        </a>
        <a href="plan.html">
            <img src="http://workshop.rs/projects/coin-slider/games/prince_of_persia.jpg" alt="Price of Persia" />
            <span>
                heading2
            </span>
        </a>
        <a href="num.html" >
            <img src="http://workshop.rs/projects/coin-slider/games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
            <span>
                heading3
            </span>
        </a>
        <a href="exp.html" >
            <img src="http://workshop.rs/projects/coin-slider/games/brink.jpg" alt="Brink" />
            <span>
                heading4
            </span>
        </a>
        <a href="rep.html">
           <img src="http://workshop.rs/projects/coin-slider/games/borderlands.jpg" alt="Borderlands" />
            <span>
                heading5
            </span>
        </a>

    </div>
</div>
</body>
</html>

投幣滑條無法正確顯示按鈕（Chrome除外）

問題描述

1 個解決方案

解決方案1
0 2013-10-30 12:42:42

投幣滑條無法正確顯示按鈕（Chrome除外）

問題描述

1 個解決方案

解決方案1 0 2013-10-30 12:42:42

解決方案1
0 2013-10-30 12:42:42