Internet explorer 如何在IE中为这个倾斜的DIV导航设置CSS3回退？

摘自以下网址的教程：

我一辈子都无法在任何版本的IE中使用它。它只以普通项目符号列表的形式显示导航，但我知道这必须是可能的，基于以下方面的一些发现：

以下是在几乎所有其他浏览器中运行的设置：

JS Fiddle链接：

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”标记，因此将

更改为

至少会使其在IE中显示为正常矩形

编辑#2：我越深入地了解这一点，我就意识到使用“skew”CSS3属性可能会更容易。倾斜容器，然后向后倾斜跨度（与此旋转的设置方式相同）。但是，仍然存在IE 8、7和6的问题

除了IE中不支持的

元素（您已经发现了这一点），我认为您最好的选择是条件注释。因此：

<!--[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]-->

---

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

我建议简单地使用这个：并将生成的代码放在仅限IE的样式表中

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

---

至于

元素，您可以使用脚本让HTML5元素在IE中工作。

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

但是，有一种非常可选的方法称为“”。我个人不使用这个，在你的问题中，我只使用图像。这是我的正式答复

我遇到的第一个漂亮的倾斜菜单脚本是。我将其设计为您的示例：然而，改变角的角度非常棘手，我基本上放弃了这一点。如果您理解这个概念，并且选择使用它，那么您可以在其中投入一些时间。而且，这在IE8中似乎不起作用（可能在

---

以下是一些指向其他倾斜菜单相关文章的链接：

---

JavaScript是否可以接受？没有JavaScript真的很可怕，需要在每个按钮上手动设置

宽度
。或者，你可以使用这样的东西：-但是倾斜部分不总是正常工作会有问题。我宁愿不依赖JS来实现这一点，但如果这是唯一的解决方案，我没有太多选择！事实上，我以前见过“倾斜”菜单，但当我发现Joe Critchly的CSS3教程时，我就忘记了它，因为他的解决方案似乎“更干净”。。但是，如果我不能让这一个运行，也许我会回到另一个。提示：对于IE来说，将
旋转到相反的方向是一个糟糕的解决方案，我刚刚尝试过，它非常有问题，看起来很糟糕。伊恩，我对该转换器的最大问题是它需要元素的宽度/高度。我正在接近一个导航设置，其宽度取决于按钮内的文本数量。有什么建议吗？宽度只是有用的。我用和你一样的方法创建了一个导航，其中的宽度是可变的，看起来很好。你有一个活的例子吗？我在IE6/7中有点古怪。您使用的是旋转还是倾斜？倾斜。嗯，不，恐怕这个网站还没有上线。你的电子设备可以互相连接吗？IE6/7在元素周围创建一个“框”，这样它就永远不会与它旁边的元素完全齐平。（造成巨大差距）
<!--[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]-->