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：边境被通过滚动条切断

回答

相关问题