IE 7中的css偏斜变换& 8 [英] css skew transformation in IE 7 & 8

问题描述

我有菱形样式菜单，它使用以下代码。它在Chrome，firefox，ie9等中运行良好，但我现在需要在IE 7& 8！ :(有没有办法在这些旧版浏览器上执行此操作？

I have rhombus styled menu which uses the following code. It works fine in Chrome, firefox, ie9 etc but i now need to get this working in IE 7 & 8! :( Is there a way to do this on these legacy browsers?

http://jsfiddle.net/C7e7U/

非常感谢

HTML：

<div id = "menu">
        <ul id="nav">
            <li class="rhombusStart">&nbsp;</li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
            </li>
            <li class="rhombusEnd">&nbsp;</li>
        </ul>
    </div>

CSS

/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    height: 2.9em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61);
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:2.9em;
     background-color: rgb(255,194,14);
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 2.9em;
}

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

推荐答案

https://github.com/visionmedia/move.js 刚刚下载并阅读其文档以在旧浏览器中使用CSS3

https://github.com/visionmedia/move.js just downlaod this and read its documentation to work your CSS3 in old browser

这篇关于IE 7中的css偏斜变换& 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！