表格单元格背景颜色和圆角

Question

在http://jsfiddle.net/hXMLF/3/的片段中,您会在单元格的白色边框和页面背景之间的角上看到一个小边框.我该怎样预防呢？

HTML

<table cellspacing="0" cellpadding="0">
  <tr>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>?

CSS

body {
    background-color: #efefef;
}

table {
    margin: 10px;
    border-collapse: separate;
    border-spacing: 0px;
}

td {
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}?

Answer 1

我想出了两种解决方案.使用解决方案2,但我也在这里保留解决方案1,因为它可能在某些其他情况下派给其他人使用.

解决方案1:显示

更改td显示以达到inline-block目的但可能会影响您在其他地方的实际内容......

td {
    display: inline-block; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}?

这是您更改的JSFiddle for solution 1.

解决方案2:背景剪辑(推荐)

但是,既然你正在使用CSS3,这是一个更好的解决方案:

td {
    background-clip: padding-box; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}?

这是您更改的JSFiddle for solution 2.

如果它不能在所有的浏览器,你应该知道,有作为的浏览器特定的设置-moz-background-clip,并-webkit-background-clip使用不同的设定值(他们基本忽略盒从border-box,padding-box和content-box)