jquery - 无序列表 CSS 问题

Question

我继承了一个用 Expression Engine 开发的网站，我注意到了几个问题。在首页http://trinidad.myguardiangroup.com/右侧有一个无序列表，它在调整大小时有效，但由于某些原因在某些笔记本电脑(使用谷歌浏览器的个人电脑笔记本电脑)上列表不正确(几个图标未显示)。我试图通过 CSS 并找到了这个；

/* Thumbnail Tray
----------------------------*/
 #thumb-tray {
    position:fixed;
    z-index:3;
    top:0;
    right:0;
    padding-right: 20px;
    margin-bottom: 5px;
    padding-top:35px;
    height:100%;
    width:110px;
    text-align:center;
}
#thumb-back, #thumb-forward {
    position:absolute;
    z-index:5;
    bottom:42px;
    height:108px;
    width:40px;
}
#thumb-back {
    left:0;
    background: url('../img/thumb-back.png') no-repeat center center;
}
#thumb-forward {
    right:0;
    background:url('../img/thumb-forward.png') no-repeat center center;
}
#thumb-back:hover, #thumb-forward:hover {
    cursor:pointer;
    background-color:rgba(256, 256, 256, 0.1);
}
#thumb-back:hover {
    border-right:1px solid rgba(256, 256, 256, 0.2);
}
#thumb-forward:hover {
    border-left:1px solid rgba(256, 256, 256, 0.2);
}
ul#thumb-list {
    display:inline-block;
    list-style:none;
    position:relative;
    left:0px;
    padding:0 0px;
    padding-top: 20px;
}
ul#thumb-list li {
    list-style:none;
    display:inline-block;
    height: 55px;
    max-width: 100%;
    overflow:visible;
    float:left;
    margin:0;
}
ul#thumb-list li img {
    width:45px;
    height:auto;
    opacity:0.9;
}
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
}
ul#thumb-list li:hover {
    cursor:pointer;
}

但我所做的任何事情都不会影响列表...我想要做的就是缩小列表的大小以使其适合。

如果你们中的任何人看到更有效的方法来处理这个问题，我会洗耳恭听并愿意学习。

<ul id="demo-block">
   <li>
      <div id="slidecaption"></div>
      <div id="thumb-tray" class="load-item">
         <div id="homeimage0" class="show0"><img src="http://myguardiangroup.com/images/hometext/life-home.png"class="homeimagesize"></div>
         <div id="homeimage1" class="show1"><img src="http://myguardiangroup.com/images/hometext/health-home.png" class="homeimagesize"></div>
         <div id="homeimage2" class="show2"><img src="http://myguardiangroup.com/images/hometext/pensions-home.png" class="homeimagesize"></div>
         <div id="homeimage3" class="show3"><img src="http://myguardiangroup.com/images/hometext/employee-home.png" class="homeimagesize"></div>
         <div id="homeimage4" class="show4"><img src="http://myguardiangroup.com/images/hometext/mutual-home.png" class="homeimagesize"></div>
         <div id="homeimage5" class="show5"><img src="http://myguardiangroup.com/images/hometext/privatewealth-home.png" class="homeimagesize"></div>
         <div id="homeimage6" class="show6"><img src="http://myguardiangroup.com/images/hometext/motor-home.png" class="homeimagesize"></div>
         <div id="homeimage7" class="show7"><img src="http://myguardiangroup.com/images/hometext/marine-home.png" class="homeimagesize"></div>
         <div id="homeimage8" class="show8"><img src="http://myguardiangroup.com/images/hometext/business-home.png" class="homeimagesize"></div>
         <div id="homeimage9" class="show9"><img src="http://myguardiangroup.com/images/hometext/residential-home.png" class="homeimagesize"></div>
         <div id="homeimage10" class="show10"><img src="http://myguardiangroup.com/images/hometext/personalaccident-home.png" class="homeimagesize"></div>
         <div id="homeimage11" class="show11"><img src="http://myguardiangroup.com/images/hometext/travel-home.png" class="homeimagesize"></div>
      </div>
   </li>
</ul>

Answer 1

这与列表无关，问题出在您的页脚上。它与内容重叠。修复页脚的定位(固定而不是相对定位)或者将 overflow-y:auto; 添加到您的内容 div