Susy: позиционирование элемента в корневом контексте

Question

Я впервые использую Сьюзи. Мне действительно нравится то, что я вижу в документах / руководствах, но я столкнулся с некоторыми неожиданными результатами с некоторыми из моих первых попыток макета.

Информация о версии:

>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]

На рисунке ниже показан результат, который я получаю с помощью учебника html и screen.scss дословно:

Как вы можете видеть, проверка элемента h1 показывает, что он находится совсем рядом с сеткой. Это нормально?

Answer 1

Смотрите мой комментарий на другой похожий вопрос :

Сьюзи не просто еще одна система сетки, как все остальные. это было предназначен для выполнения очень конкретной цели: сетки, которые жидкости на внутри . Единицы, которые вы используете для создания сетки, применяются к контейнер, а не к каждому столбцу. Все внутри построено с проценты. То, что вы видите, нормально. Это верно для всей жидкости сетки, из-за субпиксельного округления . Это не ошибка, это часть создания адаптивных веб-сайтов.

Если вам нужны точные сетки, Сьюзи - не тот инструмент, который вам нужен. Все это зависит то, что вы пытаетесь построить.

Измените размер своего браузера, чтобы увидеть, как он работает. Вы заметите сетки привязка и плавание в пределах нескольких пикселей от их направляющих, но Сетка остается неизменной и никогда не вызывает горизонтальную полосу прокрутки.

Ура!

-e

Answer 2

Если я медленно разверну окно браузера в Chrome против Firefox, сетка и текст в Chrome будут прыгать больше, чем Firefox.Похоже, что Firefox более точен с макетом (который может наложить штраф на скорость рендеринга).

В Firefox все всегда идеально выравнивается и перемещается вместе - текстовые области и сетка - при изменении размера.В Chrome я вижу, как текст нижнего колонтитула перемещается в разное время: текст статьи, сетка - и т. Д. При изменении размера.

Вот пример, в котором текст и сетка были отключены на несколько пикселей.в Chrome: