Css Susy跨度柱未填充网格
我在我的个人网站上与susy合作，我遇到了一个奇怪的问题，在这个问题上，项目实际上并没有一直填充到它们应该跨越的最后一个专栏的末尾。我已经打开了susy网格背景，并将其放在我的测试服务器上，以便任何想要查看它的人都可以查看它 左边距似乎设置正确，但宽度似乎设置得有点太短。奇怪的是，它有一定程度的一致性。例如，如果导航栏跨越两个以上的栏，如下面的屏幕截图所示，导航栏和主面板的缺失量完全相同，尽管它们跨越的栏数不同 下面是一些相关的HTML和Sass，但我真的不知道问题是什么。我尝试过各种各样的改变，但似乎没有什么能解决它Css Susy跨度柱未填充网格,css,grid,sass,susy-compass,Css,Grid,Sass,Susy Compass,我在我的个人网站上与susy合作，我遇到了一个奇怪的问题，在这个问题上，项目实际上并没有一直填充到它们应该跨越的最后一个专栏的末尾。我已经打开了susy网格背景，并将其放在我的测试服务器上，以便任何想要查看它的人都可以查看它 左边距似乎设置正确，但宽度似乎设置得有点太短。奇怪的是，它有一定程度的一致性。例如，如果导航栏跨越两个以上的栏，如下面的屏幕截图所示，导航栏和主面板的缺失量完全相同，尽管它们跨越的栏数不同 下面是一些相关的HTML和Sass，但我真的不知道问题是什么。我尝试过各种各样的改
<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>
如果重新调整浏览器的大小，背景图像将跳转，偶尔会对齐。这是一致的，因为这不是列跨度的问题，而是浏览器处理背景图像的问题。由于这个确切的原因，网格图像对于精确测量是不可靠的
这完全取决于数学是否精确，因此浏览器不必进行任何舍入。浏览器在背景图像的亚像素取整方面做得很糟糕，我从来没有见过任何可靠的解决方法。有道理——你是不是碰巧在使用mac？似乎有一个问题（无论是在这个网站上还是在sarahsullivan.com上），导航标签在safari中没有填满整个容器，在其右侧留下一条白色的小条。我原本以为这些是相关的，但显然不是。你知道为什么会发生这种事吗？他们可能有关联。您的元素也会受到亚像素舍入的影响，但通常不会达到与背景相同的程度。对于单像素错误，你无能为力——这些只是流体设计的一部分。但如果你看到更大的差距，那是我的多个舍入错误累积造成的，你可以做很多事情来解决这个问题。例如，请参见Susy中的功能。
.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;
}
}