Question

我在我的个人网站上与susy合作，我遇到了一个bizzarre问题，其中的项目实际上并没有填写到他们应该跨越的最后一列的末尾。我已打开susy网格背景并将其放在我的测试服务器上，以便任何想要查看的人here。

左边距似乎设置正确，但宽度似乎设置得有点太短。关于它的奇怪之处在于它具有一定程度的一致性。例如，如果我的导航栏跨越另外两列，如下面的屏幕截图所示，导航栏和主面板的数量完全相同，尽管它们跨越不同数量的列。

enter image description here

下面是一些相关的HTML和Sass，但我真的不知道是什么问题。我尝试了各种各样的改变，但似乎没有什么能解决它。

<body>
<div class="page">
  <header>
    <a href="/"><div class="title">R<span class="title-kern">y</span>an Chipman</div></a>
    <nav>
      <a href="/about"><div class="nav-tab" id="nav-left"><p>About Me</p></div></a>
      <a href="/projects"><div class="nav-tab" id="nav-mid-left"><p>Projects</p></div></a>
      <a href="/interests"><div class="nav-tab" id="nav-mid-right"><p>Interests</p></div></a>
      <a href="/contact"><div class="nav-tab" id="nav-right"><p>Contact</p></div></a>
    </nav>
  </header>
  <div class="sidebar">
  </div>
  <%= yield %> <!-- main content panel here -->
  <footer class="footer">
  </footer>
</div>

.page {
    @include container($total-columns);
    @include susy-grid-background;
    background-color: $light-gray;
    padding-bottom: 2.5em;
    header {
        .title {
            @include span-columns(8, 16);
            @include push(4);
            font-size: $headline-font-size;
            clear: both;
            margin-bottom: .25em;
        }
        nav {
            @include span-columns(8, 16);
            @include push(4);
            background-color: $white;
            height: $nav-height;
            clear: both;
            .nav-tab {
                font-size: $nav-tab-font-size;
                height: $nav-height;
                @include with-grid-settings(4,25%,0%,0%) {
                    @include span-columns(1, 4);
                }
                &#nav-left {
                    background-color: $blue;
                }
                &#nav-mid-left {
                    background-color: $green;
                }
                &#nav-mid-right {
                    background-color: $orange;
                }
                &#nav-right {
                    background-color: $red;
                }
                &:hover {
                    height: $nav-hover-height;
                    @include opacity(.75);
                }
                p {
                    padding-top: 12%;
                }
            }
        }
    }
    #main {
        @include span-columns(12,16);
        @include push(2);
        @include content-box;
        h1, h2, h3 {
            clear: both;
    }
}

Answer 1

如果您重新调整浏览器的大小，背景图像会跳转并偶尔排队。这是一致的，因为它不是列跨度的问题，而是浏览器处理背景图像。作为docs note，由于这个确切的原因，网格图像对于精确测量是不可靠的。

这完全取决于数学的准确性，因此浏览器不必进行任何舍入。浏览器在背景图像上使用子像素舍入做得非常糟糕，我从未见过任何可靠的解决方法。

Susy跨栏没有填充网格

1 个答案: