3

由于某种原因，我无法覆盖 Chrome 中用户代理样式表中的边框间距。目前它设置为 2px，但我希望它是 0px。边框折叠被覆盖就好了，但边框间距没有。

我也尝试添加 -webkit-border-horizo​​ntal-spacing 和 -webkit-border-vertical-spacing

但是这些覆盖也不起作用。

我的 HTML 文档

<!DOCTYPE html>
<html>
  <head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
  <table border="0" cellspacing="0" cellpadding="0">
      <tbody>
         <tr>
             <td><img src="iron-helmet.png"></td>
             <td><img src="gold-helmet.png"></td>
             <td><img src="diamond-helmet.png"></td>
         </tr>
      </tbody>
  </table>  
</html>

我的inventorystyle.css

table {
    border-collapse: collapse;
    border-spacing: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
4

2 回答 2

3

这让我很精神。

尝试添加css img {display:block;}

这为我摆脱了它。

于 2015-07-02T23:56:17.803 回答
1

这只是 Chrome 在开发者工具中显示 CSS 规则的方式中的一个错误。该border-spacing属性按照 Chrome 中的定义工作。

在这种情况下，如果您检查table元素，border-spacing则会正确显示信息。它仅适用于内部元素，例如td开发人员工具显示误导性信息的地方。根据定义，该border-spacing属性不适用于它们，因此它对它们的价值无论如何都无关紧要。如果单击“Computed”，您将看到计算后的样式根本不包含border-spacing，即使在继承的属性中也是如此。

在示例中，元素的值border-spacing也table没有任何影响，因为 a) 正在使用折叠边框模型，并且b) HTML 标记包含设置为的cellspacing="0"属性，除非您在 CSS 中显式覆盖它。border-spacing0

于 2014-08-06T05:54:11.897 回答