html – 如何在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：进一步我相处得很好,我意识到可以使用“歪斜”CSS3属性更容易.倾斜容器,然后倾斜跨度(与旋转设置相同).仍然有IE 8,7,& 6但是.

解决方法

我建议使用这个： CSS3 Transform to Matrix Filter Converter,并将结果代码放在一个只有IE的样式表中.

我自己使用它,发现它工作得很好.

至于< nav>元素,那么你可以使用HTML5 Shiv脚本来使HTML5元素在IE中工作.

原文地址：https://www.jb51.cc/html/230476.html