How would you setup a CSS3 fallback in IE for this slanted DIV navigation?_问答_开发者

Taken from a tutorial at: http://www.joecritchley.com/demos/slanted-nav/

I can't for the life of me get this to work in ANY version of IE. It only displays the navigation as a normal bulleted list, but I know it must be possible based on some findings from http://css3please.com/ such as:

-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;

Here is the setup that is working in almost all other browsers:

JS Fiddle link: 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>

EDIT: Well half the problem comes from IE not understanding the HTML5 "Nav" tag, so changing the <Nav> to <Div> will at least get it to display as normal rectangles in IE.

EDIT #2: The further I get along with this, i'm realizing it could just be easier to use the "skew" CSS3 property. Skew the container, then skew back the span (same as how this rotation is setup). Still ha开发者_开发技巧ve issues with IE 8,7, & 6 however.

I would suggest simply using this: CSS3 Transform to Matrix Filter Converter and put the resulting code in an IE only stylesheet.

I've used it myself and found it works quite well.

As for the <nav> element, well you can use the HTML5 Shiv script to get HTML5 elements to work in IE.

In addition to the <nav> element being unsupported in IE, which you already found out, I would say your best bet is conditional comments. Thus:

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

Adding that to the code you posted in your question makes it look acceptable, though clearly less sexy than the rotated version.

This isn't as simple as it seems. Basically, using CSS manipulators for this is tricky and always very limited.

However, there is a very alternative method called "spiffy". I personally don't use this and for such cases as in your question, I would simply use images. This was my official answer.

First spiffy slant menu script I came across was Stu Nicholls "Slat Menu". I styled it as in your example: http://jsfiddle.net/hobobne/LsVyY/ However, changing the angle of the corners is very very tricky and I basically gave up on that. If you understand the concept, and you choose to use this, then you can invest some time in it. Also, this seems not to work in IE8 (probably not in < IE's either.) So basically it fails.

Here are some links to some alternative slanted menus related articles: