Weird misalignment in my Susy layout

问题

The elements I set the Susy span-column() mixin to, do not obey to it. They are misaligned ever so slightly. How do I achieve perfect alignment of my HTML elements?

Screenshot of full website misalignment

Detail : <header> and <nav> misalignment

Detail : <section class="main"> misalignment

Here is my Sass code

@import compass
@import susy
@import normalize


/* Susy Settings */


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

$desktop : 12

/* 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)


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

ul
  background-color: rgba(1, 0, 50, 0.1)

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, $desktop)
  +susy-grid-background



/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background
  header
    float: left
    +span-columns(2)
    background: rgba(250,0,0,.2)


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

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

  .main
    +span-columns(10 omega,12)
    background: rgba(0,240,200,.3)

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

And my HTML

<!DOCTYPE html>
<html>                      
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link href="stylesheets/style.css" media="screen, projection" rel="stylesheet" type="text/css" />

  <title>Home</title>

</head>

<body>
  <div class="page">
    <header>
      <h1 id="logo">
        <a href="">
            "Designer Name"
        </a>
      </h1>
      <nav class="pagenav" role="navigation">
        <ul>
          <li>
            <a href="">
              <h2>
                work
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                blog
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                about
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                contact
              </h2>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <section class="main">
      <h1 id="heading">
        Main Title
      </h1>
      <p>
        smappppin conta naoiw nasdhi aaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdoifj odhfi dhsjkenbrou snfco784ijrh8heuhfs kdjf ksdpppf
      </p>
      <h2>A New Title</h2>
      <p>
        Vertical grids are a compas feature. See the compass docs for baseline grid background. You won't be able to show both grids at once on the same element without a bit more work. Maybe we should integrate that somehow in Susy 2.0? Vertical grids are a compas feature. See the compass docs for baseline grid background. You won't be able to show both grids at once on the same element without a bit more work. Maybe we should integrate that somehow in Susy 2.0?
      </p>
      <p>AJASd nasdi oasd iabjds iausbd kasbd oiausbdi absdiuabsidb aisudb iasbd iabsdi basid baisdb jhavsdjh agvsdk abs klda;is d'asijd AOSDU IASD IAsid hyi/aisD haH siD HAISHd IAhdA sid aSIHD aihsf ihgiuyerhf 9f3kuhsdffdsfsd
      </p>
    </section>
    <footer class="pagefoot">
      <p>Made by</p>
    </footer>
  </div>
</body>
</html>

回答1:

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 also has isolation options, which can be used to stop sub-pixel errors from compounding.

来源：https://stackoverflow.com/questions/16545194/weird-misalignment-in-my-susy-layout

标签

Sass

compass-sass

susy-compass