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