google-chrome - chrome / safari (webkit) 在指针交互上松散边界半径

Question

我在 div 中遇到列表问题。问题是，我有一个 div 里面有一个列表。这限制了将显示给用户的 div 强度的数量。当超过限制时，会在这个 div 内看到一个滚动，以便用户查看其他内容，这个 div 在底部有一个圆边（border-radius）。当我将鼠标移到 LAST ITEM LIST 上时，它会消除 div 的边界半径的影响。谁能帮助我这里是一个文件 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到滚动元素。

显然这似乎可以防止错误

希望这可以帮助