水平圖像滑塊不能在鉻和IE11中工作

Question

我正在構建水平圖像滑塊，它在Chrome和IE11中不起作用。關於它的奇怪的部分是它確實在使用Chrome和IE的時候在小提琴中工作。

這裏是小提琴：https://jsfiddle.net/7y81hjtx/6/

這裏，它是在網絡上：http://a-b-smith.com/wedding/slider.html

通知所有圖像向右而不是滾動，如何獲得超微型以適應屏幕？

這裏是有關HTML

<div class="galleryWrap" id="wrapper"> 
    <table border="0"> 
     <tbody> 
      <tr> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="1" src="http://lorempixel.com/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="2" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td class="wide"> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="3"src="http://lorempixel.com/400/200/sports/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="4" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="5" src="http://lorempixel.com/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="6" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="7" src="http://lorempixel.com/200/200/sports/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="8" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="9" src="http://lorempixel.com/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="10" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="11" src="http://lorempixel.com/200/200/sports/" style="max-height: 390px;" /> 
        </div> 
       </td> 
       <td> 
        <div class="horizontalGalleryImageHolder"> 
         <img id="12" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" /> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS

.ulWrapper { 
margin: 20px auto 0; 
display: block; 
height: 50px; 
} 

.ulWrapper ul { 
margin: 0 auto; 
padding: 0; 
display: table; 
list-style: none; 
} 

.ulWrapper li { 
float: left; 
} 
ul 
{ 
list-style-type: none; 
} 

li{width: 50px; float: left; margin-right: 1px; margin-left: 1px;} 
body { 
    margin: 0; 
} 
table { 
    border-collapse: collapse; 
} 
td.wide{width: 40%;} 
td { 
    width: 20%; 
    padding: 0px; 
} 
img { 
    width: 100% 
} 
.galleryWrap { 
    width: 100%; 
    overflow-x: scroll; 
} 
.left { 
    float: left; 
    width: 100px; 
    height: 30px; 
    background-color: blue; 
    color: white; 
} 
.right { 
    float: right; 
    width: 100px; 
    height: 30px; 
    background-color: blue; 
    color: white; 
} 

table { 
    white-space: nowrap; 
} 
td { 
    display: inline-block; 
} 

的Javascript

function left() { 
     var width = document.getElementById('wrapper').clientWidth; 
     var offsetWidth = width/5; 

     document.getElementById("wrapper").scrollLeft -= offsetWidth; 
    } 

    function right() { 
     var width = document.getElementById('wrapper').clientWidth; 
     var offsetWidth = width/5; 

     document.getElementById("wrapper").scrollLeft += offsetWidth; 
    } 

和JQuery（雖然我很積極，這是確定）

$('.small-img').click(function() { 
    var id = $(this).attr('id'); 
    var idNum = id.charAt(1); 
    if (id.charAt(2) == '0'){ 
     idNum = 10; 
    }else if(id.charAt(2) == '1'){ 
     idNum = 11; 
    }else if(id.charAt(2) == '2'){ 
     idNum = 12; 
    } 
    document.getElementById(idNum).scrollIntoView(); 
}); 

如何取回滾動條並防止圖像變小？

Answer 1

問題是它不像100％寬度的圖像。我刪除了這個，它開始工作：

img { 
    width: 100%; 
} 

然後我用一個固定的100px寬度替換100％的寬度，它仍然工作。

我不確定這是爲什麼。也許瀏覽器不喜歡試圖弄清楚用％尺寸溢出的內容是什麼？

希望這會有所幫助。