Susy跨欄沒有填充網格

我在我的個人網站上與susy一起工作，而且我遇到了一個bizzarre問題，其中的項目實際上並沒有填滿所有的方式到他們應該跨過的最後一列的末尾。我已經將susy網格背景變成了現實，並將其放在我的測試服務器上，以便任何想要查看的人都可以查看here。Susy跨欄沒有填充網格

左邊距似乎設置正確，但寬度似乎設置得有點太短。關於它的奇怪之處在於它有一定程度的一致性。例如，如果我有導航欄跨越兩個多列（如下面的屏幕截圖所示），導航欄和主面板的數量就會縮短相同的數量，儘管它們跨越不同的列數。

enter image description here

下面是一些相關的HTML和無禮的話，但我真的不能告訴是什麼問題。我嘗試了各種變化，但似乎沒有解決它。

<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; 
    } 
}

來源

2014-01-24 Ryan Chipman

如果你重新大小您的瀏覽器，背景圖像會跳，偶爾排隊。這是一致的，因爲它不是列跨度的問題，而是瀏覽器處理背景圖像。作爲docs note，出於這個確切原因，網格圖像對於精確測量來說不可靠。

這一切都取決於數學是精確的，所以瀏覽器不必做任何舍入。瀏覽器在背景圖像上進行亞像素四捨五入的工作非常糟糕，我從未見過任何可靠的解決方法。

來源

2014-01-24 09:03:40

有道理 - 你有使用mac的機會嗎？似乎有一個問題（在本網站和sarahsullivan.com上），導航標籤沒有在Safari中填充其容器的全長，在右側留下一條白色條帶。我原本以爲這些是相關的，但顯然不是。你有什麼想法爲什麼這可能會發生？ –

他們可能有關係。您的元素也可能受到子像素四捨五入的影響，但通常不會達到與背景相同的程度。對於單像素錯誤，您無能爲力 - 這只是流體設計的一部分。但是，如果你看到更大的差距，那些導致我的多個舍入錯誤疊加起來，並且你可以做很多事情。例如，請參閱Susy中的[isolation]（http://susy.oddbird.net/guides/reference/#ref-helper-isolation）功能。 –

Susy跨欄沒有填充網格

回答

相關問題