9

我担心我完全不知道如何解释它以及我可以展示它。所以我设置了这个小提琴。

如您所见，导航菜单不在应有的位置。它应该精确地设置在 head 元素的底部边框和左边框。即bottom: 0和left: 0。但是，我设置了 -90 度的旋转，很明显nav元素上的绝对定位发生在旋转之前，或者更确切地说是在原始元素上发生，就好像旋转不存在一样。

我尝试过使用:before和:after伪元素来尝试看看我是否可以这样解决它。但我不能完全掌握这些伪元素。在这两种情况下，旋转都被绕过了。（如果没有旋转，nav元素显然会将自己定位在它应该在的位置。）

这基本上是代码：

<div id="head">
    <div id="title">My Web</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Something Else</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

没有什么花哨。

这是 CSS（与此问题相关的部分）：

#head {
    position: relative;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}
nav a {
    display: inline-block;
    padding: 0 9px;
}

它是如何工作的：你可以在 Fiddle 项目中看到它。

希望有人能帮我一把。

附言。此外，有时，根据<a>标签内文本的大小，看起来，垂直元素之间的距离nav略有增加，好像在半个像素，这意味着边界变得模糊。您可以在另一个版本中看到这一点<a>，其中一个元素中只有 4 个字符和一个空格。无法理解为什么这会有所作为。但是，当它发生时，它会使菜单看起来很糟糕！

4

2 回答 2

12

发生这种情况是因为nav元素具有不同的宽度和高度。默认情况下，元素按其中心旋转，因此如果nav旋转后该块的角不匹配。解决这个问题的方法是设置transform-orgin将移动旋转点的属性，使变换前后的左下角在同一位置。在您的情况下，它是transform-origin: 75px 75px;（独立于<a>长度工作）。

这是小提琴

不幸的是，它不能解决 IE8 的问题——因为这些浏览器不支持转换并使用他们自己的旋转方式。

于 2013-06-15T09:25:32.567 回答
2

它似乎是导航中 ul 的填充。尝试微调

导航 ul { padding-left: 0; }

（Chrome 的开发工具可能会帮助您找到丢失的最后 1 或 2 个像素，帮助我找到 ul 填充。）

于 2013-06-15T07:31:42.610 回答