Question

摘自以下教程：http://www.joecritchley.com/demos/slanted-nav/

我不能为我的生活让这个在任何版本的IE中工作。它只将导航显示为正常的项目符号列表，但我知道它必须基于http://css3please.com/的一些结果，例如：

-ms-transform: rotate(20deg);  /* IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
           zoom: 1;

以下是几乎所有其他浏览器都可以使用的设置：

JS小提琴链接：http://jsfiddle.net/zumajoe/9ukdm/

CSS

#main-nav > ul
{
margin-top:50px;
overflow:hidden;
}

#main-nav > ul > li
{
float:left;
font-size:18px;
margin-left:-35px;
overflow:hidden;
padding:20px;
}

#main-nav > ul > li:first-child
{
border-radius:10px;
margin-left:0;
}

#main-nav > ul > li > a
{
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
background:#bbb;
border-left:1px solid #FFF;
color:#444;
display:block;
height:150px;
margin-bottom:-100px;
margin-top:-70px;
overflow:hidden;
text-decoration:none;
}

#main-nav > ul > li:first-child > a
{
border-left:0;
border-radius:10px;
}

#main-nav > ul > li > a > span
{
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
display:block;
margin-top:57px;
overflow:hidden;
padding:0 20px;
}

#main-nav > ul > li > a:hover
{
background:#aaa;
}

#main-nav > ul > li.current > a
{
background:#000;
color:#fff;
}

HTML

<nav id="main-nav"> 
            <ul> 
                <li class="current"><a href="#"><span>Home</span></a></li> 
                <li><a href="#"><span>News</span></a></li> 
                <li><a href="#"><span>About</span></a></li> 
                <li><a href="#"><span>Work</span></a></li> 
                <li><a href="#"><span>A longer menu item</span></a></li> 
                <li><a href="#"><span>Contact</span></a></li> 
            </ul> 
        </nav>

编辑：问题的一半来自IE不理解HTML5“导航”标签，因此将<Nav>更改为<Div>至少会使其在IE中显示为正常矩形。

编辑＃2：我与此相处得越远，我意识到使用“倾斜”CSS3属性可能更容易。歪斜容器，然后向后倾斜跨度（与设置此旋转的方式相同）。 IE 8,7仍有问题，＆amp;但是。

Answer 1

我建议只使用这个：CSS3 Transform to Matrix Filter Converter并将生成的代码放在仅IE样式表中。

我自己用过，发现效果很好。

对于<nav>元素，您可以使用HTML5 Shiv脚本让HTML5元素在IE中运行。

Answer 2

除了你已经发现的IE中不支持的<nav>元素之外，我想说你最好的选择是有条件的评论。因此：

<!--[if lt IE 9]>
<style type="text/css">
    #main-nav ul li a span{
        margin-top: 40px;
    }
    #main-nav ul li {
        margin-left: -45px;
    }
</style>
<![endif]-->

将这一点添加到您在问题中发布的代码中，使其看起来可以接受，但显然不如旋转版本那么性感。

Answer 3

这并不像看起来那么简单。基本上，使用CSS操纵器是非常棘手的，而且总是非常有限。

但是，有一种非常替代的方法叫做“spiffy”。我个人不使用这个，对于你的问题中的这种情况，我会简单地使用图像。这是我的正式答案。

我遇到的第一个漂亮的倾斜菜单脚本是Stu Nicholls "Slat Menu"。我在你的例子中设计了它： http://jsfiddle.net/hobobne/LsVyY/ 然而，改变角落的角度是非常棘手的，我基本上放弃了。如果您理解这个概念，并且选择使用它，那么您可以花一些时间在其中。此外，这似乎在IE8中不起作用（可能不在＆lt; IE中。）所以基本上它失败了。

以下是一些替代倾斜菜单相关文章的链接：

如何在IE中为这个倾斜的DIV导航设置CSS3后备？

3 个答案: