Susy：元素在根上下文中的定位

这是我第一次使用Susy。我非常喜欢我在文档/教程中看到的内容，但是在第一次尝试布局时遇到了一些意想不到的结果。Susy：元素在根上下文中的定位

版本信息：

>gem install compass-susy-plugin 
Successfully installed sass-3.1.2 
Successfully installed chunky_png-1.2.0 
Successfully installed fssm-0.2.7 
Successfully installed compass-0.11.1 
Successfully installed compass-susy-plugin-0.9 

>ruby --version 
ruby 1.9.2p136 (2010-12-25 revision 30365) [x86_64-darwin10.5.0]

下图显示的结果我用tutorial HTML获取和screen.scss逐字：

why_is_the_h1_off_the_grid_somewhat

正如你所看到的，检查h1元素显示它坐在电网旁边。这是正常的吗？

来源

2011-06-05 jsleeuw

如果我在Chrome和Firefox中缓慢地扩展浏览器窗口，那么在Firefox中网格和文本在Chrome中的跳跃就更多。看起来Firefox对布局更加精确（这可能会导致渲染速度的损失）。

在Firefox中，当我调整大小时，所有内容总是完美排列并一起移动 - 文本区域和网格。在Chrome中，当我调整大小时，可以看到页脚文本在不同时间与文章文本和网格VS等移动。

下面是一个例子，其中的文字和电网是关闭的相当多的像素在Chrome：

enter image description here

来源

2011-08-18 02:36:21

Chrome用于处理背景中的子像素四舍五入。你会注意到这是跳跃的背景，而不是列本身。或者，您会注意到旧版Chrome。我无法再重复这一点。 – 2012-05-24 07:58:06

查看another similar question我的评论：

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

如果你需要像素精确的网格，Susy是你的错误工具。这一切取决于你正在尝试构建。

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

干杯！

-e

来源

2012-02-15 06:54:44

Susy：元素在根上下文中的定位

回答

相关问题