Question

我在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 div {
  border: 1px solid red;
}

预期的输出将是3列完全相互接触。实际输出是两列相互接触，如预期，但第三列在右侧稍微偏移，在中心和右侧之间留下一个空白区域（参见附图，编辑，但问题仍然存在）。

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

enter image description here

Answer 1

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

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

查看基金会＆＃34;不完整行＆＃34;下的文档。 http://foundation.zurb.com/docs/components/grid.html#incomplete-rows

Answer 2

问题在于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"

Answer 3

看起来像Safari正在转换列的％宽度的舍入问题，默认站点宽度最终（在我的机器上）以1000px宽度结束。比较Chrome和Safari之间的计算结果，我在Chrome中获得333.328px，在Safari中获得333px。

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

Answer 4

我通过将css类添加到最后一列，此类的css

来解决此问题

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

Answer 5

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

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

在CSS上： .border {border-right：1px solid color-of-column;}

ZURB基金会和行崩溃

5 个答案: