css - 使用 zurb 基础时如何让 box-sizing 工作？

Question

尝试使用 zurbs 基础，我发现两列设置为并排排列，实际上是“阶梯式”。即，他们中的一个最终坐在另一个之下。

此时，我只使用了两个 sass 文件：_foundation-global.scss 和 _grid.scss

我发现问题出在网格默认值内：框的基础默认填充扩展了柱状框的宽度。结果，总和宽度超出了 .row。

这让我很困惑：基础网格文档是这样说的：

“Foundation 使用 box-sizing:border-box 以便边框和填充不会影响列的整体宽度，使数学变得非常简单”

与此相反，我发现这些框没有设置为 box-sizing:border-box。

因此，我当然在新样式表中包含了新规则，将 div、文章和部分设置为边框框。

但是，我随后发现此设置对 Firefox 没有帮助。原来firefox不支持这个属性。铬似乎。我还没有在其他浏览器上测试过。

那么，这是怎么回事？当然基础应该支持Firefox，我只是错过了一些东西。

score 1 · Accepted Answer

由于 Foundation 是在 Compass 之上构建的，因此您可以使用box-sizingCompass 中的 mixin 来为您处理所有前缀：

@import 'compass/css3/box-sizing';

.foo {
    @include box-sizing(border-box);
}

score 0 · Accepted Answer

前几天我遇到了同样的问题。为了自动应用 box-sizing，你必须把你的列放在一个带有row类的 div 中。

但最重要的是，这就是我所缺少的......您还需要将该类与数字类一起应用于columns您的列 div (EG class="large-6 columns)

<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

score 0 · Accepted Answer

我发现将以下代码添加到您的 CSS 可以修复旧版本 Firefox 中的框大小问题。

.row,
[class*="block-grid-"]
{
     -moz-box-sizing: border-box;
}

在 Windows 7 上的 Firefox 16.0.2 上测试

3 回答 3