2

我正在做一个项目，我在导航栏上创建了箭头末端。问题是转换在 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:before 规则。

http://jsfiddle.net/rsxavior/sTP5F/2/

4

1 回答 1

2

我发现了为什么这不起作用，我将发布以供将来参考，以防有人遇到同样的问题。IE8 不会将矩阵应用于伪类，例如:before 和:after。我需要在 a 元素中添加一个空的 span 标签并更改边距以使其按预期工作。

于 2013-01-29T13:32:06.787 回答