7

在片段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;
}​
4

3 回答 3

22

我想出了两个解决方案。使用解决方案 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;
}​

这是您为解决方案 1 更改的 JSFiddle。

解决方案 2：背景剪辑（推荐）

但是由于您无论如何都在使用 CSS3，这是一个更好的解决方案：

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

这是您为解决方案 2 更改的 JSFiddle。

如果它不适用于所有浏览器，您应该知道存在特定于浏览器的设置 as-moz-background-clip并且-webkit-background-clip使用不同的值集（它们基本上省略了box和border-box）padding-boxcontent-box

于 2012-11-22T14:22:46.980 回答
1

发生这种情况是因为

border-collapse: separate;

让它这样。表格并不完全是造型的首要角色，我建议您尝试使用<div>标签。

试试这个：http: //jsfiddle.net/hXMLF/9/

于 2012-11-22T14:21:19.190 回答
0

检查此链接。您可以为圆角单元格生成 CSS。

http://cssround.com/

例子：

<div 
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius:    0px 26px 0px 0px;
border-radius:         0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow:    #B3B3B3 2px 2px 2px;
box-shadow:         #B3B3B3 2px 2px 2px;
">

Just modify width and height values to get what you need...

</div>
于 2013-07-12T11:00:58.320 回答