保证金权利不尊重我在Susy中的$ gutter值 [英] margin-right not respecting my $gutter value in Susy

问题描述

由于某些原因，以 .tile 样式设置的div不尊重我的 $ gutter-width 或 $ column-width 值（我不确定是哪一个），并且这些div没有正确排列到 + susy-grid-background 参考网格。

For some reason my divs styled with .tile do not respect my $gutter-width or $column-width values (I'm not sure which one) and these divs are not lining up properly to the +susy-grid-background reference grid.

在下面的屏幕截图中，您可以看到不符合 $ columns-width 和 $ gutter-width 值。最重要的是，这些青色div应该排成一排，但第4个则被击倒到第二排。

In the screenshot below you can see the square cyan divs not adhering to $columns-width and $gutter-width values. On top of that, there should be 4 of these cyan divs in one row but the 4th one is getting knocked down to the second row.

为什么会这样？这是一个亚像素舍入问题吗？

Why is this happening? Is this a sub pixel rounding issue?

_base.sass 代码

/* Susy Settings */

$total-columns  : 5             
$column-width   : 4em            
$gutter-width   : 1em            
$grid-padding   : $gutter-width  

$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)  

style.sass 代码

@import compass
@import susy
@import normalize
@import base


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: rgba(250,0,0,.2)
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

    .tile
      +span-columns(3, 12)
      +adjust-leading-to(9)
      +trailer(1)
      background: #0f6   

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)     

推荐答案

多亏了埃里克（Eric），我才得到一个更老的类似问题，他曾在这里回答过：

Thanks to Eric I was referred to an older similar question that he had answered before over here:

奇怪的未对准t在我的Susy布局中

Susy网格（默认情况下）内部是流畅的。所有的流体网格
都会受到子像素舍入在浏览器端。
表示，您主要看到的是
背景网格上的子像素舍入，这通常比实际的
元素舍入差。那是在文档中注意到的-网格背景是一个
粗略的指南，而不是精确的像素标尺。

Susy grids are (by default) fluid on the inside. All fluid grids suffer from some amount of sub-pixel rounding on the browser end. That said, what you are mainly seeing is sub-pixel rounding on the background grid, which is normally worse than the actual element-rounding. That is noted in the docs - the grid background is a rough guide, not a pixel-exact ruler.

Susy也有隔离选项，可用于阻止错误/ blog / sensitive-design-s-dirty-little-secret rel = nofollow noreferrer>复合。

Susy also has isolation options, which can be used to stop sub-pixel errors from compounding.

因此，对于这个特定问题，我只是将 + span-columns（3,12）替换为 + isolate-grid（3，12），所以我的最终 .tile sass看起来像这样

So for this particular problem, I just replaced +span-columns(3,12) with +isolate-grid(3, 12) so my final .tile sass looks like this

.tile
  +isolate-grid(3, 12)
  +adjust-leading-to(9)
  +trailer(1)
  background: #0f6   

这就是结果

这篇关于保证金权利不尊重我在Susy中的$ gutter值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！