Question

我设置Susy span-column()混合的元素，不遵守它。他们有点不对齐。如何实现HTML元素的完美对齐？

完整网站错位的屏幕截图

Full site screenshot

明细：<header>和<nav>错位

enter image description here

明细：<section class="main">未对齐

enter image description here

这是我的Sass代码

@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)

我的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>

Answer 1

Susy网格（默认情况下）内部是流动的。所有流体网格在浏览器端都有一些sub-pixel rounding。也就是说，你主要看到的是背景网格上的子像素舍入，这通常比实际的元素舍入更糟糕。那是noted in the docs - 网格背景是一个粗略的指南，而不是像素精确的标尺。

Susy还有isolation个选项，可用于阻止来自compounding的子像素错误。

我的Susy布局中出现了奇怪的错位

1 个答案: