html - 纯 HTML/CSS 图像 slider 在其他浏览器上看起来与 Firefox 不同

Question

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

编辑: slider 现在适用于所有浏览器，但 slider 顶部的红色条仍然存在。如果有人能告诉我我需要在代码中编辑什么以消除差距，我将不胜感激

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;
}