CSS：邊境被通過滾動條切斷

我的CSS：CSS：邊境被通過滾動條切斷

.ConnectionBox:hover 
{ 
    background-color: rgba(255, 255, 255, 0.7); 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
    border: #solid 5px #000; 
}

我的HTML：

<div class="ConnectionBox" style="width:600px;height:350px;font-size: 12px; padding-left: 5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;border-radius: 5px;border:1px solid #000; overflow-y: auto; text-align: left;"> 
Blablabla 
Blablabla 
Blablabla 
</div>

的界限變得右側切斷（看右上和右邊底部），這裏是jsfiddle鏈接，我該如何解決這個問題？

來源

2015-10-19 Joe

您在哪個操作系統上使用哪種瀏覽器？ MacOSX上的Firefox中不會發生這種情況。 –

這是因爲你有圓角。所以你需要從滾動條到右邊框設置一些邊距或者減小滾動條的高度。 – D3myon

Linux上的Google Chrome v46 – Joe

用滾動條向容器添加一些填充。填充的值至少應該是您給出的邊界半徑。這樣你就可以確保沒有任何內容會與被四捨五入的邊框重疊。

這就是說我不能保證這適用於所有瀏覽器，因爲滾動條是瀏覽器鑲邊，並且不會受到CSS的影響。

例如：

.element { 
    padding: 10px; 
    border-radius: 10px; 
}

來源

2015-10-19 13:53:33

對我而言，鉻不適用 – Lynxi

是的。看起來這是一個與操作系統有關的問題，因爲MacOS瀏覽器中的滾動條與Linux的外觀相比表現非常不同。 –

試試這個：

http://jsfiddle.net/realdeepak/Lbu8dvLx/1/

HTML：

<div class="ConnectionBox"> 
    <div class="box-content"> 
     <ul> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
      <li>CPU Model : MIPS 24Kc V7.4</li> 
     </ul> 
    </div> 
</div>

CSS：

.ConnectionBox{ 
     height:300px; 
     width:450px; 
     border-radius:10px; 
     border:2px solid #666; 
     padding:6px 0px; 
     background:#ccc; 
    } 

    .box-content{ 
     height:300px; 
     width:450px; 
     overflow:auto; 
     border-radius:8px; 
    }

來源

2015-10-19 13:58:12 RealDeepak

它的工作很棒。 –

CSS：邊境被通過滾動條切斷

回答

相關問題