2

我有这段代码，它使用纯 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 上运行？

4

4 回答 4

2

是的，这在 IE7 中是可能的，无需使用 JS 插件。不要让反对者愚弄你。这是您更新的代码：

<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>​
于 2012-09-04T07:56:08.900 回答
0

你试过用 CSS3Pie

http://css3pie.com/

于 2011-11-21T01:06:54.880 回答
0

专门为 ie7 的条件注释中的样式 .arrow。ie7 不理解 :after,:before,:content 或 display:inline-block 。如果不查看该站点，则很难提供可靠的修复。副手，我会让它显示：块；带有文本缩进并使用背景图像。

于 2011-11-21T03:42:08.537 回答
0

http://code.google.com/p/ie7-js/项目声称支持:after,:before和content. 你会使用IE8.js它的一部分。

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

于 2011-11-21T04:06:35.183 回答