ZURB 基础和行崩溃答案

【问题标题】：ZURB Foundation and row collapseZURB 基础和行崩溃
【发布时间】：2014-01-25 01:26:18
【问题描述】：

我在 ZURB 的论坛上发布了一个问题，但我注意到没有任何帖子的答案。我认为这个问题可能会发生在许多其他人身上，我认为将它也放在 SO 上可能是个好主意。来了：

我使用以下标记制作了一个最小的问题示例（使用 CLCS 建议编辑）：

<body>
    <div class="row collapse test">
      <div class="large-4 columns">
          <p>Test 1</p>
        </div>
        <div class="large-4 columns">
          <p>Test 2</p>
        </div>
        <div class="large-4 columns">
          <p>Test 3</p>
        </div>
      </div>
</body>

所有 CSS 类都是 ZURB Foundation 未触及的类。唯一添加的是 test-table 类，其唯一目的只是为了获得有关问题的视觉帮助（为了清晰起见，也进行了编辑）：

.test div {
  border: 1px solid red;
}

预期的输出将是 3 列完美地相互接触。实际输出是两列像预期的那样相互接触，但第三列在右侧偏移了一点，在中心和右侧之间留下了一个空白（参见附图，也已编辑，但问题仍然存在）。

[EDIT]似乎其他一些用户在相同的环境下也面临同样的问题（Safari 7，Zurb Rails Gem 5.0.2.0）[/EDIT]

【问题讨论】：

将“large-4”分配给
标签是标准的吗？我以为那些只应该适用于div？？
坦克 CLCS。我通常不这样做，我只是在编写示例时发现它显示了正确的问题。我确实编辑了我的问题以反映您的建议，但它显示了相同的问题（请参阅新的 sn-p 和新的屏幕截图）。根据监视此线程的其他一些用户：foundation.zurb.com/forum/posts/1311 这将是 Safari 问题。有什么想法吗？

标签： zurb-foundation space multiple-columns collapse grid-system

【解决方案1】：

Safari 如何转换列的百分比宽度似乎是一个舍入问题，默认站点宽度最终（至少在我的机器上）为 1000 像素宽。比较 Chrome 和 Safari 的计算结果，我在 Chrome 中得到 333.328px，在 Safari 中得到 333px。

根据您的其余布局要求，一种解决方法可能是将您的布局宽度调整为更适合您需要的列的图形。

【讨论】：

乔治，谢谢。现在我无法对此进行测试，因为从基础中取消注释默认值会覆盖 scss 文件更改它的行为方式，这意味着注释值不是默认值。如果有人可以测试 George 的解决方案并进行报告，我将很乐意选择他的解决方案作为正确的解决方案。

【解决方案2】：

这是其他人在上面指出的舍入问题和 Foundation 将 float: right; 放在该行的最后一列这一事实的组合。这就是为什么您会看到最后一列和中间一列之间的差距。

要消除差距，您可以将end 类添加到每一列。

查看“不完整行”下的 Foundation 文档 http://foundation.zurb.com/docs/components/grid.html#incomplete-rows

【讨论】：

【解决方案3】：

问题在于 Safari 的舍入。对于 Safari 中的 large-4，width: 33.333% 和 width: 33.333333% 之间存在差异。为了解决这个问题，使用 sass 在基础 sass 文件的基础上编译自己的 css 并制作更高精度的数字。

将Sass::Script::Number.precision = 6 放入config.rb 或在 Gruntfile.coffee 中

   sass:
        options:
            loadPath: ["bower_components/foundation/scss"]
            sourcemap: "true"
            precision: 6

        dist:
            files:
                "css/app.css": "scss/app.scss"

【讨论】：

这解决了我的问题，并且是我发现有人提到这一点的唯一地方。谢谢！！！

【解决方案4】：

我通过在最后一列添加 css 类来修复它，这个类的 css

.your_class_for_last_column { float: left !important;} 
/* to fix 1px Foundation 5 bug*/

【讨论】：

【解决方案5】：

添加 1px 的边框对我有用。你可以试试这样的：

<div class="small-5 small-offset-2 columns border">
     ...        
</div>
<div class="small-5 columns border">
    ...
</div>

在 CSS 上： .border {border-right: 1px 纯色列；}

【讨论】：