IE 7中的css偏斜变换& 8

时间:2012-06-28 09:27:08

标签: html css html5 internet-explorer css3

我有菱形样式菜单,它使用以下代码。它适用于Chrome,firefox,ie9等,但我现在需要在IE 7& 8! :(有没有办法在这些旧版浏览器上执行此操作?

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

1 个答案:

答案 0 :(得分:-1)

https://github.com/visionmedia/move.js只需将其下载并阅读其文档,即可在旧浏览器中使用CSS3