Susy版面中的怪异未对准 [英] Weird misalignment in my Susy layout
问题描述
我将Susy span-column（） mixin设置为的元素，不服从它。它们从未如此轻微地错位。如何实现HTML元素的完美对齐？
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
详细信息：< header> 和&n; 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>
推荐答案
Susy网格（默认情况下）内部是流体。所有的流体网格在其上都会受到一定程度的子像素舍入浏览器端。也就是说，您主要看到的是背景网格上的子像素舍入，这通常比实际元素舍入差。那是文档中提到的-网格背景是一个粗略的指南，而不是像素精确的标尺。
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.
这篇关于Susy版面中的怪异未对准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
