IE 7 和 8 中的 CSS 倾斜转换答案

【问题标题】：css skew transformation in IE 7 & 8IE 7 和 8 中的 CSS 倾斜转换
【发布时间】：2012-06-28 19:25:40
【问题描述】：

我有菱形样式的菜单，它使用以下代码。它在 Chrome、firefox、ie9 等中运行良好，但我现在需要让它在 IE 7 和 8 中运行！ :( 有没有办法在这些旧版浏览器上做到这一点？

非常感谢

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

【问题讨论】：

css 转换不适用于 IE6、IE7 或 IE8。您可以使用透明 png 作为菜单的背景图像，但这适用于 IE8。对于 IE7，您将不得不使用 pngfix（谷歌搜索）或其他东西。
你可以从另一个方向解决这个问题：你可以使用两边的倾斜边框技巧 + 一些负边距：stackoverflow.com/questions/11242262/…
... 或者在 IE 中使用 css3 渐变 + css3pie：developer.mozilla.org/en/CSS/linear-gradient css3pie.com
倾斜边框的技巧看起来很有趣，但我怎么会有边框呢？
这就是我所能做的：jsfiddle.net/C7e7U/2

标签： html internet-explorer css

【解决方案1】：

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

【讨论】：