我尝试将 Susy 网格应用于包含一个徽标和导航链接的标题。但是我遇到了一些我无法解释自己的真正意外行为。HTML 如下所示：
<header id="top" role="banner" class="headerstyle headerline">
<div class="sectionwrap">
<div itemscope itemtype="http://schema.org/Organization">
<a class="logohome" href="#gohome" title="Logo">
<span itemprop="logo" class="sitelogo" data-picture data-alt="Logo">
<span data-src="img/logo.png"></span>
<span data-src="img/logo_x2.png" data-media="(min-device-pixel-ratio: 2.0)"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="img/logo.png"></span>
<![endif]-->
<span data-src="img/logo400.png" data-media="(min-width: 350px)"></span>
<span data-src="img/logo400_x2.png" data-media="(min-width: 350px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="img/logo800.png" data-media="(min-width: 800px)"></span>
<span data-src="img/logo800_x2.png" data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="img/logo1000.png" data-media="(min-width: 1000px)"></span>
<span data-src="img/logo1000_x2.png" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img itemprop="logo" class="sitlogo" src="img/logo.png" alt="Logo">
</noscript>
</span>
</a>
</div>
<nav role="navigation">
<ul class="navio" id="togglenav" tabindex="0">
<li>
<a href="#togglenav" class="icon-alone toggler" title="Menu">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span>
</a>
</li><!--
--><li><a class="navessentials" href="#pointone">Point1</a></li><!--
--><li><a class="navessentials" href="#pointtwo">Point2</a></li><!--
--><li><a class="navessentials" href="#pointthree">Point3</a></li><!--
--><li><a class="navessentials" href="#pointfour">Point4</a></li><!--
--><li><a class="navessentials" href="#pointfive">Point5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
</div>
</header>
.sectionwarp 是 Susy 容器的类。.logohome 托管徽标（我已将 Scott Jehls 图片填充的代码放在那里）。nav 元素包含带有 5 个菜单点的菜单以及作为字体图标的菜单切换按钮和用于关闭打开菜单的隐藏列表元素。仅 CSS 切换导航基于以下文章切换导航
.logohome{
float:left;
width:17em;
}
.toggler{
position: absolute;
z-index: 1001;
top: 0.55em;
right: 0.5em;
text-decoration: none;
cursor: pointer;
font-size: 2.75em; //3em
}
#togglenav li:not(:first-child) a {
@include tran(color, $navtext);
text-decoration: none;
@include tran(bg, $fixedheader, 0.95);
display: inline-block;
height: 3em;
line-height: 1.5em;
padding: .8em;
border-bottom: 1px solid orange;
width: 100%;
}
body:not(:target) #togglenav {
margin: 0;
padding-top: 5.3em;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1000;
}
body:not(:target) #togglenav li:not(:first-child) {
width: 100%;
height: 0;
line-height: 0;
overflow: hidden;
-webkit-transition: height 0.25s;
-moz-transition: height 0.25s;
-o-transition: height 0.25s;
transition: height 0.25s;
}
body:not(:target) #togglenav:target {
z-index: 1001;
}
body:not(:target) #togglenav:target .toggler {
z-index:-1;
}
body:not(:target) #togglenav:target li:not(:first-child) {
height: 3em;
line-height: auto;
overflow: visible;
-webkit-transition: height 0.25s;
-moz-transition: height 0.25s;
-o-transition: height 0.25s;
transition: height 0.25s;
}
body:not(:target) #togglenav:target .togglereset {
height: 0;
line-height: 0;
}
body:not(:target) #togglenav:target .togglereset a {
width: 100%;
background-color: transparent;
border: none;
height: auto;
position: absolute;
top: -101em;
bottom: -101em;
left: 0;
right: 0;
text-indent: -999em;
direction:ltr;
z-index: -1;
}
@include breakpoint($menutogglerswitch) {
.toggler {
display: none;
}
body:not(:target) #togglenav {
padding-top: 0;
float:right;
position:relative;
top:0.8em;
}
body:not(:target) #togglenav li:not(:first-child):not(:last-child) {
display: inline;
border: none;
}
body:not(:target) #togglenav li:not(:first-child) a {
line-height: 1.5em;
height: 2em;
width: auto;
border: none;
background-color: transparent;
padding: 0;
margin-left: 1.5em;
&:hover{
padding-bottom: 0;
margin-bottom: 0;
border-bottom:5px $navunderline solid;
}
}
body:not(:target) #togglenav .togglereset {
display: none;
}
}
Toggle Button 是绝对定位的，使用上面粘贴的当前设置，一切看起来都很好：Toogle Nav without Susy。现在，我尝试简单地将徽标放入一列，将切换按钮用于较小的视口，将导航用于更宽的视口。但是已经在第一步中，这三个中的一个表现得很奇怪。我已经尝试过尝试不同的元素挂钩以及关闭切换元素的绝对位置，但没有任何帮助，我只是困惑为什么 Susy 表现得像它的行为以及我做错了什么。;) 我用 float:left 和固定宽度删除了 .logohome 并将其替换为以下内容：
.logohome {
@include span-columns(6,18);
outline: 1px solid green;
}
.toggler {
@include breakpoint(1px 899px) {
@include span-columns(12 omega,18);
outline:1px solid red;
}
}
.navio{
@include breakpoint(900px) {
@include span-columns(12 omega,18);
outline:1px solid yellow;
}
}
.navio 和 .logohome 在桌面视口（桌面视口）上的行为与预期一样。但是，如果您查看移动视口 ( Mobile Viewport )，则 .toggler 的列更宽，并且切换器图标的位置与其绝对位置完全相反。如果有人能解释为什么 .toggler 列及其内容的行为与它的行为一样，我会很高兴。提前感谢拉尔夫
