1px граница сбросив Susy сетку с

Question

Первый раз проводки так относиться ко мне нежно :)

Так что я пытаюсь поместить две кнопки бок о бок с помощью Сюзи, и это, кажется, работает нормально:

.fifty { 
    @include span-columns(3); 
    @include nth-omega(2n); 
} 

Однако, как только я объявляю 1px границу с кнопкой, эффективная ширина составляет 100% + 4px и, таким образом, она разбивает макет.

Я использую плагин Compass Vertical Rhythm для всех значений прошивки кнопок, поэтому не хотел бы испортить это.

Любая помощь, очень ценится.

Answer 1

Это связано с «How to include padding in column width with Susy», но ваш второй вариант немного отличается. Эта проблема не является специфической для Susy - это верно для любого расположения жидкости - Но компас и Сюзите могут помочь вам с первым решением:

1. Использования коробчатой ​​замасливающим: граница ящика; - теперь это поддерживается всеми основными браузерами, а Compass имеет удобный пакетный размер() mixin, чтобы заботиться о префиксах для вас. Если вы используете его везде (как и я), он может изменить размер контейнера Susy, но Susy поставляется с удобным микшином, чтобы исправить все это для вас. Просто добавьте это в корне, прежде чем установить свои контейнеры - это создаст модель коробки, и пусть Susy знать, чтобы приспособиться к нему:

   @include border-box-sizing; 
   

   Или просто использовать компас box-sizing(border-box) подмешать, где вы хотите его (на них кнопки).

2. Поскольку границы не принимают значения%, просто нет возможности добавить границы к элементам жидкости (используя модель содержимого по умолчанию). Если вы не можете использовать модель border-box, единственным вариантом является добавление внутреннего элемента в разметку, использование внешнего для калибровки и внутреннего для границ и стилей.

3. Существует третий вариант - использование calc() - но это сложнее сделать, и еще меньше поддержки браузера ...

Вариант № 1 является лучшим на сегодняшний день - до тех пор, как вы можете оставить IE7 из забавы.