Question

出于某种原因，我无法覆盖Chrome中用户代理样式表中的边框间距。目前设置为2px，但我希望这是0px。边界崩溃被覆盖得很好，但边界间距没有。

我也尝试过添加 -webkit-border-horizontal-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;
}

Answer 1

这让我很精神。

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

这为我摆脱了它。

Answer 2

这只是Chrome在开发人员工具中显示CSS规则的方式中的一个错误。 {* 1}}属性的工作原理，如Chrome中所定义。

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

在示例中，border-spacing元素的border-spacing值也没有任何影响，因为a）正在使用折叠边框模型和 b） HTML标记包含table属性，该属性将cellspacing="0"设置为border-spacing，除非您在CSS中明确覆盖此内容。

无法覆盖用户代理样式表中的边框间距

2 个答案: