chrome / safari（webkit）松散的border-radius指针交互

Question

我在div中遇到列表问题。问题是，我有一个里面有一个列表的div。这限制了对用户显示的div强度的量。当超过限制时，将在此div内看到一个滚动，供用户查看其他强度，同样的div在底部有一个圆边（border-radius）。当我将鼠标移到最后一个项目列表上时，它会删除div的border-radius效果。谁可以帮助我这里是一个文件jsFiddle Here

 .limit {
height:300px;
width:500px;
background-color:red;
overflow: scroll;
/*overflow: hidden;*/
overflow-x: hidden;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6x;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6x;
}

提前多多赞赏！

Answer 1

由

引起

li { ... position:relative; ... }

从li中移除它并将其应用于嵌套元素（即li > .somediv）并使其透明......没有边框，背景等。

---

更新：更好的解决方法http://jsfiddle.net/YcYHd/

将outline:1px transparent solid添加到滚动元素。

显然这似乎可以防止错误

希望这会有所帮助