弯曲的边缘没有出现溢出

我已经把我的名单的border-radius到6px这适用于所有的浏览器，但在Chrome细，当有overflow集top-right和bottom-right弯曲的边缘是隐藏的。这只是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

来源

2016-12-28 user4756836

可能在浏览器的错误。一种解决方法是使用:: - webkit-scrollbar前缀自定义滚动条。这个前缀在firefox中被忽略，这会使你的滚动条成为默认的半径不变的滚动条。

FIDDLE

例：

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

<div class="container"> 
 
    <div class="list"> 
 
    <div class="list-item"> 
 
     Test 1 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 2 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 3 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 4 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 5 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 6 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 7 
 
    </div> 
 
    <div class="list-item"> 
 
     Test 8 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-28 17:04:52 sol

弯曲的边缘没有出现溢出

回答

相关问题