1

Chrome 似乎以这种非常具体的方式存在问题。如果您有一张带有圆角边框的桌子（是的，我知道桌子很糟糕），并且背景图像重复出现，那么图像会溢出角落的边框。

这是一个jsfiddle示例。这是我期望使用 div 而不是 table 发生的事情的jsfiddle 。

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

这是一个 Chrome 错误还是我做错了什么只是碰巧在其他 webkit 浏览器上工作？

4

3 回答 3

1

这是你想要的吗：

http://jsfiddle.net/8f7Hu/1/

使用 css：

background-repeat: repeat;
于 2013-06-24T18:45:24.993 回答
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;
}

演示

于 2013-06-24T18:48:24.867 回答
0

您可以使用边框间距：0；

对于 Chrome 来说，这似乎还不够。所以我们有：溢出：隐藏；并最后声明背景（而不是背景图像。）

其他方式，将 background-image 放在 tbody 中（即使您没有标记它，浏览器也会生成它）

演示：http: //jsfiddle.net/5cuRH/3/

#placeholder {
    width: 200px;
    height: 100px;
}
table {
    border: 1px solid #CC6633;
    background-repeat: repeat-x;
    background-position: top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    border-spacing:0;
    background:url(https://dl.dropboxusercontent.com/u/42944578/gradient.jpg);
}
table + table {background:none;}
table + table tbody {
   background-image:url(https://dl.dropboxusercontent.com/u/42944578/gradient.jpg);
}
于 2013-06-24T18:58:33.093 回答