彎曲的邊緣沒有出現溢出

Question

我已經把我的名單的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

Answer 1

可能在瀏覽器的錯誤。一種解決方法是使用:: - 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>