1

Susy span-column()mixin に設定した要素は、それに従いません。それらは非常にわずかにずれています。HTML 要素を完全に配置するにはどうすればよいですか?

完全なウェブサイトのずれのスクリーンショット

サイト全体のスクリーンショット

詳細:<header>および<nav>位置ずれ

ここに画像の説明を入力

詳細:<section class="main">ずれ

ここに画像の説明を入力

これが私の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>
4

1 に答える 1

0

Susy グリッドは (デフォルトで) 内部が流動的です。すべての流体グリッドは、ブラウザ側である程度のサブピクセルの丸めの影響を受けます。とはいえ、主に表示されているのは、背景グリッドのサブピクセルの丸めです。これは通常、実際の要素の丸めよりも悪いです。これはドキュメントに記載されています-グリッドの背景は大まかなガイドであり、ピクセル単位の正確な定規ではありません。

Susy には分離オプションもあり、サブピクセル エラーの複合化を防ぐために使用できます。

于 2013-05-14T16:13:01.197 に答える