浏览器正在自动调整网格布局答案

【问题标题】：browser is auto-resizing grid layout浏览器正在自动调整网格布局
【发布时间】：2013-12-27 08:01:54
【问题描述】：

我似乎无法弄清楚为什么（只有 chrome）会在我的商店中自动调整网格布局的大小

它只在整个商店的 2 页上进行 -

  http://www.towingpartsoutlet.com/chain-assemblies-grade-80-chain-assemblies-3-8-chain-assemblies-g80.html
  http://www.towingpartsoutlet.com/chain-assemblies-grade-70-chain-assemblies-5-16-grade-70-v-chains.html

css 中没有特定于浏览器的规则...

我很困惑。任何人都可以请帮忙。

【问题讨论】：

您的文本在每个元素上以不同的大小呈现。由于您的框仅设置为具有显示宽度的填充，因此文本决定了框的大小。你可能会说宽度是 33%，但 Chrome 将填充添加到 33% 并使其更大
检查这里：stackoverflow.com/questions/10158893/… 和这里：stackoverflow.com/questions/3605367/…。我建议去掉填充并在表格单元格内创建一个 div，该单元格以固定大小居中
在我看来像overflow 问题。尝试将overflow:hidden; 设置为主环绕（带有黄色渐变背景的那个）。
@ntgCleaner 我从来没有经历过你提到的...
我不认为这是溢出问题 - 我认为这是填充 .. 因为当我删除时，它解决了问题。

标签： html css

【解决方案1】：

在您的 css 文件 line 34 上，css-element.css。用这个代替一切。应该比以前更好（即使在其他浏览器上，table 也有一点重叠）。 :D

tr, td {
    margin: 0 2px 2px 0;
    display: inline-table;
    table-layout: fixed;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    word-wrap: break-word;
}

然后也添加这个 CSS（在 tr/td 代码之前）：

table {
    border-spacing: 0;
}

【讨论】：

您的 CSS 工作正常。非常感谢....这如何防止 chrome 添加填充？
说，填充并不是真正的问题。但是我使用box-sizing:border-box 来确保填充没有添加到元素宽度，而是在 33% td 宽度内应用了填充。有关box-sizing 的更多信息，请点击此处：developer.mozilla.org/en-US/docs/Web/CSS/box-sizing