Question

我正在尝试为标题导航创建一个css trianlge。我已经实现了它，但它在IE中无法正常呈现。

这是我创建的示例的工作小提琴解决方案。我已经修复了位置，但是当我尝试在IE中运行时（目前我有IE 11.0），三角形呈现为方框但是当我尝试运行时它在Chrome和FF中工作正常。

a:hover:after {
            background: white;
            border: solid black;
            border-width: 1px 1px 0 0;
            bottom: 0px;
            content: ' ';
            display: block;
            height: 10px;
            left: 32px;
            position: absolute;
            width: 10px;
            z-index: 99;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: 50% 50%;
        }

Answer 1

使用-ms-transform: rotate(-45deg)

Answer 2

感谢Akshay mohite。作为旁注，我编辑了搜索解决方案的js小提琴。

小提琴：http://jsfiddle.net/cKnyQ/25/

#Container a:hover::after {
        content: "";
        display: block;
        border: 8px solid black;
        border-bottom-color: white;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -12px;
        background: white;
    }

Css Triangle在IE中无法正确呈现

2 个答案: