Chrome上的弯曲边缘不会出现溢出

Question

我已将我的列表border-radius设置为6px，但在所有浏览器中均可正常使用，但在Chrome中，top-right和bottom-right曲线边缘会被隐藏设置overflow。这只是Chrome呈现的方式吗？如果没有，我该如何解决这个问题？

我的代码：

<div class="container">
  <div class="list">
    <div class="list-item">
      Test 1
    </div>
    <div class="list-item">
      Test 2
    </div>
  </div>
</div>

JSFiddle Demo

Answer 1

可能是Chrome中的一个错误。一种解决方法是使用:: - webkit-scrollbar前缀自定义滚动条。在firefox中忽略此前缀，这将使您的滚动条显示为半径完整的默认值。

FIDDLE

示例：

TimeUnit...sleep(x)

  .container {
    width: 300px;
  }
  
  .list {
    overflow-x: hidden;
    position: relative;
    height: 300px;
    border: 1px solid #000;
    border-radius: 6px;
  }
  
  .list-item {
    padding: 13px 0 7px;
  }
  
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
  }