1

我有一个带有以下 CSS 的表：

width: 100%;
border-spacing: 0px;
table-layout: fixed;

然后，我使用以下类指定了 3 列：

@UsedColumnWidth: 26px;
@DeleteColumnWidth: 18px;

.UsedCountColumn {
    width: @UsedColumnWidth;
}
.DeleteColumn {
    width: @DeleteColumnWidth;
}
.CapabilityColumn {
    /*width: @ContainerWidth - @UsedColumnWidth - @DeleteColumnWidth;*/
    /*width: 100px;*/
}

在查看 chrome 开发人员工具时，我注意到我的宽度比我指定UsedCountColumn的DeleteColumn多 2 个像素，我无法弄清楚为什么会发生这种情况。我认为也许边界间距搞砸了，但我将它设置为 0。关于为什么会发生这种情况的任何想法？

4

2 回答 2

2

这就是为什么它添加填充而不显示它。我认为您正在使用 LESS :)

如果我们谈论的是“浏览器默认 css”，那么肯定会有一些填充和边距。

人们制作 reset.css 文档的原因是因为浏览器具有不同的“默认 css 值”。

例如。一些浏览器有更灰色/黄色的背景，而其他浏览器则完全是白色的。

为了确保更好的布局并使其在其他浏览器中看起来相同，您需要进行 css 重置。

例子。

* {
   margin: 0;
   padding: 0;
   /* ect styles */
}

和ofc..

总视觉宽度 = 填充 + 宽度 + 边框

总填充宽度 = 填充 + 边距 + 宽度 + 边框

高度 ofc 也是如此 :)

于 2012-12-18T16:19:08.433 回答
0

我猜这是因为你有一个 1px 的边框，总共为元素添加了 2px。如果是这种情况，您仍然可以保留边框，但应该添加box-sizing或使用outline。

于 2012-12-18T16:20:29.913 回答