您将如何在IE中为此倾斜的DIV导航设置CSS3后备广告？

问题描述

| 取自以下教程：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 \”标记，因此将<Nav>更改为<Div>至少会使其在IE中显示为普通矩形。编辑＃2：我对此进一步了解，我意识到使用\“ skew \” CSS3属性可能会更容易。倾斜容器，然后倾斜跨度（与设置此旋转方式相同）。 IE 8,7和6仍然存在问题。

解决方法

我建议使用以下方法：CSS3转换为矩阵过滤器转换器，并将结果代码放入仅IE样式表中。我自己使用过它，发现它工作得很好。至于<nav>元素，那么您可以使用HTML5 Shiv脚本来获取HTML5元素以在IE中工作。 ,除了您已经发现的IE中不支持的“ 5”元素外，我还说最好的选择是条件注释。从而：

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

将其添加到您在问题中发布的代码后，它看起来可以接受，尽管显然不如旋转版本性感。 ,这并不像看起来那么简单。基本上，为此使用CSS操纵器非常棘手，而且总是非常有限。但是，还有一种非常替代的方法称为“ spiffy”。我个人不使用它，对于您所提出的问题，我只会使用图像。这是我的正式答案。我遇到的第一个精美的倾斜菜单脚本是Stu Nicholls \“ Slat Menu \”。我按照您的示例进行了样式设置：http://jsfiddle.net/hobobne/LsVyY/但是，更改拐角的角度非常棘手，我基本上已经放弃了。如果您了解此概念，并选择使用它，则可以花一些时间。另外，这似乎在IE8中不起作用（可能也不在