Блог

Я пытаюсь создать сеточную структуру с помощью плагинов susy, но по какой-то причине я получаю для нее дополнительное пространство.

 $susy: (
  gutter-position: after,
  container: 1280px,
  container-position: center,
  columns: 14,
  gutters: 0.6,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (image: show),
  // debug: (
  //   image: show,
  //   color: rgba(#ccc, 0),
  //   output: background,
  //   toggle: top right
  // ),
  use-custom: (
    background-image: false,
    background-options: false,
    box-sizing: false,
    clearfix: false,
    rem: false
  )
);


.region {
        @include span(12 of 14);
        @include pre(1);
}

  

Я хочу, чтобы область div была ровно 1140 пикселей, и это 1140 пикселей, когда я измеряю его с помощью этих двух дополнительных ячеек сетки, прикрепленных на скриншоте. Как я могу их удалить?

Если я измеряю от крайнего правого до крайнего левого, сетка составляет 1140 пикселей, но если я только начну измерять от темно-розового до последнего темно-розового края, это 1112 ~ 1113 пикселей.

Из документации для функции «отладки» Susy:

Изображения сетки не являются точными. У браузеров возникают дополнительные проблемы с субпиксельным округлением фоновых изображений. Они предназначены для грубой отладки, а не для измерения с точностью до пикселя. Ожидайте, что сторона «до» вашего изображения сетки (справа, если ваш поток равен ltr) будет отклонена на несколько пикселей.

При настройке размера окна вы обнаружите, что оно иногда выравнивается, когда столбцы разделяются на четные значения пикселей.

Субпиксельное округление является проблемой только для фоновых изображений. Это не повлияет на фактический макет.