HTML/CSS - 我找不到的幻影边距答案

【问题标题】：HTML/CSS - Phantom Margin which I can not findHTML/CSS - 我找不到的幻影边距
【发布时间】：2016-12-07 17:30:28
【问题描述】：

我正在我的网站上创建一个菜单栏。我的问题是我的一个菜单项的一侧有一个小边距。（我通过在容器中添加 background-color: black; 来突出显示这一点。）我正在使用 safari。

CSS：

.testMenuOption{
  width: calc(100%  /3);
  height: 100%;
  float: left;
  margin:auto;
  background-color: white;
  display: table;
}

谁能告诉我我的问题是什么？我已经尝试删除文本，但这不是问题。

【问题讨论】：

标签： html css border margin

【解决方案1】：

由于您使用 100/3 计算宽度，因此会出现舍入误差，因此宽度不会再次相加 100%。修复它的方法是将两个 .menuOptionsWraps 的宽度设置为 33% 和一个设置为 34%。

例如这样做：

.menuOptionSelectedWrap {
    float: left;
    width: 33%;
    height: 100%;
    margin: auto;
    margin-right: -4px;
    background-color: #d6eef2;
    display: table;
}
.menuOptionSelectedWrap:last-of-type {
    width: 34%;
}

【讨论】：

width: 33.33333333% 应该也能正常工作，例如，Bootstrap 就是这样做的。
33.33333333% 肯定永远不会完全准确吗？
这取决于容器的总大小。如果剩余的 0.0000001% 的空间小于浏览器将其渲染为像素所需的空间，则我不应该可见。但是你可能已经猜到了这样一个容器必须有多大才能渲染那个像素。

【解决方案2】：

我不确定你在说什么，当窗口调整大小时黑线会改变。检查你的 CSS，宽度：calc(100% /3); 改变值 3，你会明白的。

【讨论】：