IE 7 & 中的 css 倾斜转换8 [英] css skew transformation in IE 7 & 8
本文介绍了IE 7 & 中的 css 倾斜转换8的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有使用以下代码的菱形样式菜单.它在 Chrome、firefox、ie9 等中运行良好，但我现在需要在 IE 7 & 中运行它.8！:( 有没有办法在这些旧浏览器上做到这一点?
非常感谢
HTML:
CSS
/***********************************************菜单样式************************************************/#菜单 {边距:0 自动；填充左:2%；宽度:1024px；高度:2.9em；位置:相对；顶部:0；背景颜色:RGB(255,194,14)；边框:1px 实心 rgb(140,51,61)；}#导航{保证金:0;填充:0;列表样式类型:无；列表样式位置:外面；位置:相对；高度:2.9em；背景颜色:RGB(255,194,14)；}#nav >李{向左飘浮;位置:相对；}#nav >菱形{向左飘浮;位置:相对；-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;变换原点:0 0;-webkit-transform:skew(35deg);-moz-transform:skew(35deg);-ms-transform:skew(35deg);-o-transform:skew(35deg);变换:倾斜(35度)；右边框:1px 实心 rgb(239,89,24)；左边框:1px 实心 rgb(255,244,80)；背景颜色:RGB(255,194,14)；字体系列:格鲁吉亚；颜色:RGB(131,0,26)；宽度:8em；文本对齐:居中；高度:2.9em；}菱形>跨度{-webkit-transform:skew(-35deg);-moz-transform:skew(-35deg);-ms-transform:skew(-35deg);-o-transform:skew(-35deg);变换:倾斜(-35度)；文字装饰:无；垂直对齐:中间；显示:表格单元格；} 解决方案
https://github.com/visionmedia/move.js 只需下载并阅读其文档即可在旧浏览器中使用 CSS3
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?
Many Thanks
HTML:
<div id = "menu">
<ul id="nav">
<li class="rhombusStart"> </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"> </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 just downlaod this and read its documentation to work your CSS3 in old browser
这篇关于IE 7 &amp; 中的 css 倾斜转换8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
