Как бы вы настроили запасной вариант CSS3 в IE для этой наклонной DIV навигации?

Question

Взято из учебника по адресу: 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 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: половина проблемы заключается в том, что IE не понимает тег HTML5 "Nav", поэтому изменение <Nav> на <Div> по крайней мере заставит его отображаться в IE как обычные прямоугольники.

РЕДАКТИРОВАТЬ # 2: Чем дальше я с этим справляюсь, тем лучше понимаю, что может быть проще использовать свойство «перекос» CSS3.Наклоните контейнер, затем наклоните диапазон (так же, как этот поворот).Тем не менее, есть проблемы с IE 8,7, & 6 однако.

Answer 1

Я бы предложил просто использовать это: Преобразование CSS3 в Matrix Filter Converter и поместить полученный код в таблицу стилей только для IE.

Я сам использовал его и обнаружил, что он работает довольно хорошо.

Что касается элемента <nav>, вы можете использовать скрипт HTML5 Shiv , чтобы заставить элементы HTML5 работать в IE.

Answer 2

В дополнение к тому, что элемент <nav> не поддерживается в 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]-->

Добавление к коду, опубликованному в вашем вопросе, делает его приемлемым, хотя и явно менее сексуальным, чем повернутая версия.

Answer 3

Это не так просто, как кажется.В основном, использование CSS манипуляторов для этого сложно и всегда очень ограничено.

Однако, существует очень альтернативный метод, называемый " spiffy ".Я лично не использую это, и в таких случаях, как в вашем вопросе, я бы просто использовал изображения.Это был мой официальный ответ.

Первый скрипт меню с косой косой, с которым я столкнулся, был Stu Nicholls "Slat Menu" .Я сделал это так, как в вашем примере: http://jsfiddle.net/hobobne/LsVyY/ Однако изменение угла очень сложно, и я в основном отказался от этого.Если вы понимаете концепцию и решаете использовать ее, то вы можете потратить на нее некоторое время.Кроме того, кажется, что это не работает в IE8 (вероятно, не в

Вот несколько ссылок на некоторые альтернативные статьи, посвященные наклонным меню:

• Невозможное наклонное, диагональное, настройка навигации с помощью CSS, jQuery & XHTML
• Меню наклонного делителя
• cssSandpaper - библиотека CSS3 JavaScript