纯HTML / CSS图像滑块在其他浏览器上看起来与firefox不同

Question

我只是创建了一个图像滑块，当我在chrome和safari中打开滑块时，滑块底部的3个导航按钮没有显示。 这是代码http://cssdeck.com/labs/full/ivxl7z5k

编辑 ：滑块现在可在所有浏览器中使用，但滑块顶部的红色栏仍然存在。 如果有人能告诉我我需要在代码中进行哪些操作以消除差距，我将不胜感激

HTML代码：

<div id="slides">
      <input checked type="radio" name="slider" id="slide1" class="set" />
      <input type="radio" name="slider" id="slide2" class="set" />
      <input type="radio" name="slider" id="slide3" class="set" />

      <div class="mask">

        <div class="overflow">

          <div class="slide">
            <img src="images/slideshow1.jpg">
          </div>

          <div class="slide">
            <img src="images/slideshow2.jpg">
          </div>

          <div class="slide">
            <img src="images/slideshow3.jpg">
          </div>

        </div>

      </div>


      <div id="controls" onclick="">  
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
      </div>

    </div>

CSS代码：

      #slides { 
      position:absolute;
      width:1024px; 
      height: 525px;
      margin: 0;
      padding: 0;
      left: 256px;
      background: #ddd;
    }

    #slides input {

      position: relative;

      left: 30px;
      top: 500px;
    }

    #slides .mask { 
      width:1024px; 
      overflow:hidden; 
      margin:auto; 

    }

    #slides .overflow { 
      width:400%; 
      -webkit-transform:translateZ(0); 
      -webkit-transition:all 0.5s ease-out; 
      -moz-transition:all 0.5s ease-out; 
      -o-transition:all 0.5s ease-out; 
      transition:all 0.5s ease-out; 

    }

    #slides .slide { 
      width: 1024px; 
      height: 525px;  
      float:left; 
      background:#fff; 


    #controls { width:100%;  }

    #controls label { 

      display:none; 
      width:5%; 
      height:60px; 
      opacity:0.3; 
      position:absolute; 
      top:50%; 
      margin-top:-30px; 
      cursor:pointer; 
      background:#000; 
    }

    #controls label:hover { opacity:0.8; }

    #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3); 

    #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2);

Answer 1

尝试为单选按钮使用z-index。 例如，在其CSS中添加z-index：100。

#slides input {
      position: relative;
      left: 30px;
      top: 500px;
      z-index:100;
}