4

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

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

在此处输入图像描述

4

5 回答 5

3

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

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

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

于 2014-03-24T22:35:48.957 回答
3

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

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

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

        dist:
            files:
                "css/app.css": "scss/app.scss"
于 2014-05-05T17:39:14.053 回答
1

看起来像 Safari 如何转换列的 % 宽度的舍入问题，默认站点宽度最终（至少在我的机器上）为 1000px 宽。比较 Chrome 和 Safari 之间的计算结果，我在 Chrome 中得到 333.328px，在 Safari 中得到 333px。

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

于 2014-01-09T15:58:23.440 回答
0

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

.your_class_for_last_column { float: left !important;} 
/* to fix 1px Foundation 5 bug*/
于 2014-06-06T09:02:18.107 回答
0

添加 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;}

于 2014-07-03T04:31:16.063 回答