无法使基于Susy的网格正确对齐

Question

我一直在试用Susy Compass的SASS插件，但我注意到它并没有像我预期的那样工作。

我从official Susy tutorial获取了index.html和screen.scss，编译了SCSS并将其放在my server上。你可以看到它看起来就像它应该（在我测试过的所有浏览器上）：

接下来我做的是：

• 复制<article>中的<div role="main">并将其粘贴六次
• 在screen.scss中，相应地更改列跨度（div[role="main"] > article）：从@include columns(6,9);到@include columns(1,9);

但是现在这些新元素根本没有与网格对齐，它们被一个清晰可见的空间所取代。我在FF，Safari和Chrome的最新版本中对此进行了测试，只有FF似乎才能正确显示。屏幕截图来自Chrome：

我还上传了所有人的来源，以便检查here。

这是Susy的一般问题，网格不正确还是我做错了什么？如果是第一个，有人知道解决方法吗？我也试过百分比和像素，但都没有用。

Answer 1

Susy不仅仅是与其他网格系统一样的另一个网格系统。它旨在实现一个非常特定的目的：fluid on the inside的网格。用于创建网格的单位将应用于容器，而不是应用于每个列。里面的一切都是用百分比构建的。你所看到的是正常的。由于sub-pixel rounding，所有流体网格都是如此。这不是一个错误，它是构建响应式网站的一部分。

如果您需要像素精确网格，Susy是您的错误工具。这一切都取决于你想要建立什么。

重新调整浏览器的大小以查看其工作原理。您会注意到网格在其指南的几个像素内捕捉并漂浮，但网格保持完整，从不触发水平滚动条。

干杯！

-e