CSS - 显示：表格，固定宽度获得小数答案

【问题标题】：CSS - Display: Table, fixed width getting a decimalCSS - 显示：表格，固定宽度获得小数
【发布时间】：2017-09-21 09:45:47
【问题描述】：

我在 Chrome 中遇到一个问题，即固定宽度的 div 无法正确显示。请看我的jsFiddle。

我有三个嵌套的 div。

.container {
  background: red;
  width: 375px;
}

<div class="container">
  <div style="display: table; width: 375px; background: red;">
    <div style="display: table-cell; width: 375px; background: blue">
      Content
    </div>
  </div>
</div>

我还为“容器”类指定了 375 像素的固定宽度。但是，在 Chrome 中，表格实际上以 374.4px 的宽度返回，而不是 375。因此，一些背景容器 div 出现在表格的右侧。我已经尝试了多种表格折叠、框大小和表格显示属性的组合，但似乎无法做到这一点。有什么想法吗？

使用 Chrome：58.0.3029.81

【问题讨论】：

我使用的是最新的 Chrome，JSFiddle 和内联 sn-p 中都不存在该问题。
对我来说也一样。版本 57.0.2987.133（64 位）
确保浏览器没有放大或缩小。
否 - 设置为 100% 正常视图。
如果我放大或缩小，它看起来确实是 374.xxx，但无法重现该问题。

标签： html css html-table

【解决方案1】：

使用这个 CSS：

table-layout: fixed

<div style="display: table; table-layout:fixed; width: 375px; background: red;">

【讨论】：