无法覆盖用户代理样式表中的边框间距
Posted
技术标签:
【中文标题】无法覆盖用户代理样式表中的边框间距【英文标题】：Can't override border-spacing in User Agent style sheet 【发布时间】：2014-09-28 21:58:35 【问题描述】：由于某种原因，我无法覆盖 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;
【问题讨论】：
您使用的是 CSS 重置文件吗？更好的是你可以使用Normalize.css 这里是链接。 necolas.github.io/normalize.css
我在我的 html 中引用了 normalize.css 但仍然没有运气。我真的不明白怎么了。这绝对不是我的照片，因为在 Firefox 中这张桌子很好。
使其更具体，如table.classname apply your stlye..
【参考方案1】：
这让我发疯了。
尝试添加 css
img display:block;
这帮我摆脱了它。
【讨论】：
【参考方案2】：这只是 Chrome 在开发者工具中显示 CSS 规则的方式中的一个错误。在 Chrome 中定义的 border-spacing 属性有效。
在这种情况下，如果您检查 table 元素，border-spacing 信息将正确显示。它只是针对内部元素，例如 td，开发者工具会在其中显示误导性信息。根据定义，border-spacing 属性不适用于它们，因此它对它们的价值无论如何都无关紧要。如果你点击“Computed”，你会看到计算出来的样式根本不包含border-spacing，即使在继承的属性中也是如此。
在示例中，table 元素的 border-spacing 值也没有任何影响，因为 a) 正在使用折叠边框模型并且 b) HTML 标记包含cellspacing="0" 属性，它将 border-spacing 设置为 0，除非您在 CSS 中明确覆盖它。
【讨论】：
感谢这有助于解释很多。我找错地方了。原来我桌子的宽度让我很伤心。 报告了这个错误吗？我找不到它：code.google.com/p/chromium/issues/…以上是关于无法覆盖用户代理样式表中的边框间距的主要内容，如果未能解决你的问题，请参考以下文章