html - 你如何在 chrome 表格中重复获得图像背景以留在圆形边框中？

Question

Chrome 似乎以这种非常具体的方式存在问题。如果您有一张带有圆 Angular 边框的表格(是的，我知道表格不好)，并且重复背景图像，那么图像会在拐 Angular 处溢出边框。

这是一个jsfiddle例子。这是一个jsfiddle我希望使用 div 而不是表格会发生什么。

这似乎只发生在 Google Chrome 中，而不是 Safari、Firefox、Opera 甚至 Chromium。添加 overflow: hidden; 并不能解决问题。

这是 Chrome 错误还是我做错了什么恰好适用于其他 webkit 浏览器？

Answer 1

我不确定为什么会这样，但是 display: inline-block 似乎可以解决这个问题:

table {
    border: 1px solid #CC6633;
    background-image:url(https://dl.dropboxusercontent.com/u/42944578/gradient.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    display: inline-block;
}

DEMO