Question

我有这个代码，使用纯CSS显示一个小三角形，它适用于所有现代浏览器，包括IE8-IE9：

<html>
<head>
    <style>
        .arrow:after {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 4px 0 0 4px;
            vertical-align: top;
            text-indent:-9999px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            content: "&darr;";
        }
    </style>
</head>
<body>
    <div class="arrow">testing</div>
</body>
</html>

问题是它不能在IE7上运行，它只是不显示箭头。

我见过有人建议使用ie8.js，但它也不起作用。

有谁知道如何让它在IE7上运行？

Answer 1

是的，这可以在没有使用JS插件的IE7中实现。不要让反对者欺骗你。这是您更新的代码：

<html>
<head>
<style type="text/css">
    .arrow:after {
        display: inline-block;
        width: 0;
        height: 0;
        margin: 4px 0 0 4px;
        vertical-align: top;
        text-indent:-9999px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid black;
        content: "&darr;";
    }
    .arrow {*zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}
    .arrow .ie-after {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&darr;');}
       </style>
</head>
<body>
    <span class="arrow">testing</span>
</body>
</html>

Answer 2

您是否尝试过使用CSS3Pie

http://css3pie.com/

Answer 3

style.arrow特别针对ie7的条件注释。 ie7不明白：after，：before，：content或display：inline-block for the matter。没有看到网站，很难提供一个坚实的解决方案。随便，我让它显示：块;使用文本缩进并使用背景图像。

Answer 4

http://code.google.com/p/ie7-js/项目声称支持:after，:before和content。您可以使用IE8.js部分。

测试页面：http://ie7-js.googlecode.com/svn/test/index.html

：在IE7上伪类之后

4 个答案: