Question

我创建了一个使用JS功能自动滑动的徽标轮播，但是当涉及white-space:nowrap样式时，它似乎仅在我的Mac OS浏览器上有效（例如Chrome，Sarai或Opera）然而，Windows浏览器（Chrome和Edge）上的相同页面会破坏线条，徽标会出现在旋转区域下方像这样：Chrome on Windows

以下是代码：

<ul id="brands-nav" style="white-space:nowrap;overflow: scroll;">
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l1.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l2.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l3.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l4.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l5.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l6.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l7.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l8.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l9.png'}}" alt="" ></li>
      <li style=" display:inline;"><img class="image-brands" src="{{skin url='agencia-brothers-files/l10.png'}}" alt="" ></li>
   </ul>
<style>
#brands-nav::-webkit-scrollbar { 
    display: none; 
}
</style>

<script>
var carousel = document.getElementById('brands-nav');
var first = carousel.children[0];
var ml = 0;

setInterval(function(){
  ml -= 0.3;
  if (-ml > first.offsetWidth){
    first.style.marginLeft = null;
    carousel.appendChild(first);
    first = carousel.children[0];
    ml = -0.2;
  }
  first.style.marginLeft = ml + 'px';
}, 2);
</script>

使用白色空间的JavaScript徽标滑块：在Mac上没有包装，但在Windows上没有

0 个答案: