firefox - 只有 Firefox 对 inline-block 元素的行为很奇怪

Question

我最近在玩响应式 css 网格，所以我尝试为新项目制作一个自己的网格。我决定让它保持相当简单，所以我display:inline-block为我的细胞使用了属性。

这将需要margin:-0.25em“hack”或删除元素之间的空格inline-block以对抗最后一个元素跳到新行。

我决定删除列之间的空白。即使在 IE8 中它也能很好地工作，但由于某种原因，最新的 Firefox 就像中间有空白一样。

我现在能想到的唯一解释是 Firefox 在渲染 HTML 代码之前重新格式化它，并在这个过程中new line在每个</div>结束标记之后添加。

这是我的JS 小提琴

提前致谢！

[ANSWER] 我忘记为加上firefox 前缀box-sizing，因此作为列间距的填充会导致内容过多。

通过将 : 添加-moz-box-sizing: border-box;到col元素来修复它。

score 8 · Accepted Answer

8

尝试垂直对齐：顶部与显示：内联块

于 2013-09-02T08:05:25.580 回答

score 3 · Accepted Answer

在摆弄您的代码之后，问题是 10px 填充。如果您删除该行 Firefox 显示与 chrome 相同（我没有在 IE 中测试）。

真的，这可能是Firefox的疏忽。我不会太担心它，因为您的页面仍然可读，尽管有点难看。

如果您愿意修复它，我的建议是通过调整它们的相对位置来“手动”填充单元格。

score 2 · Accepted Answer

任何使用 inline-block 作为其显示样式的css-grid（例如纯 CSS ）都需要一个元素（通常是 div）作为您注入 padding 的网格元素的直接子元素。请参阅下面的伪代码示例（注意这是虚构的网格语法）：

...
<style>
    .inner-wrap {
        padding: 1em;
    }
</style>
...
<div class="grid-one-third">
    <div class="inner-wrap">
    </div>
</div>

在上面的示例中，将填充直接应用于“grid-one-third”会破坏您的布局。将它应用到“inner-wrap”虽然会实现你想要的结果，而不需要像box-sizing:border-box这样的东西，在这种情况下，我认为它是解决问题的黑客解决方案。

3 回答 3