我正在开发一个项目,我在导航栏上创建了箭头。问题是转换在IE8或更低版本上不起作用,所以我想为IE实现过滤器css以使其运行,但是,我无法让它正常运行。对象不像矩阵告诉它那样旋转45。我不知道代码中是否还有其他东西阻止它旋转或者什么。我将不胜感激任何有关如何解决此问题的反馈。
.navbar .nav > li > a:before {
background: #3b679e;
background: linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
background: -moz-linear-gradient(left top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(left top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
border-top:1px solid white;
border-right:1px solid white;
border-radius:0 8px 0 0;
content: ' ';
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand');
height: 27px;
margin-left:-34px;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotate(45deg);
-moz-transform-origin: 0 0;
-o-transform: rotate(45deg);
-o-transform-origin: 0 0;
-ms-transform: rotate(45deg);
-ms-transform-origin: 0 0;
-sand-transform:rotate(45deg);
transform: rotate(45deg);
transform-origin: 0 0;
width: 28px;
}
我曾尝试使用transformie和cssSandpaper的polyfill,但他们也无法纠正这一点。旋转应用于.navbar .nav> li> a:在统治之前。
答案 0 :(得分:2)
我发现为什么这不起作用,我发布以备将来参考,以防有人遇到同样的问题。 IE8不会将矩阵应用于psuedo类,例如:before和:after。我需要在a元素中添加一个空的span标记,并更改此边距以使其按预期工作。