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

概述取自教科书： http://www.joecritchley.com/demos/slanted-nav/ 我不能为了我的生活让这个工作在任何版本的IE.它只显示导航作为一个正常的项目符号列表,但我知道,必须可能根据http://css3please.com/的一些发现,如： -ms-transform: rotate(20deg); /* IE9 */filter: progid:DXIma 取自教科书： 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 ><a @R_301_6839@="#"><span>Home</span></a></li>                 <li><a @R_301_6839@="#"><span>News</span></a></li>                 <li><a @R_301_6839@="#"><span>About</span></a></li>                 <li><a @R_301_6839@="#"><span>Work</span></a></li>                 <li><a @R_301_6839@="#"><span>A longer menu item</span></a></li>                 <li><a @R_301_6839@="#"><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中工作.

总结

以上是内存溢出为你收集整理的html – 如何在IE中为这个倾斜的DIV导航设置CSS3回退？全部内容，希望文章能够帮你解决html – 如何在IE中为这个倾斜的DIV导航设置CSS3回退？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。