:在 IE7 上的伪类之后答案

【问题标题】：:after pseudoclass on IE7:在 IE7 上的伪类之后
【发布时间】：2012-01-02 14:56:11
【问题描述】：

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

【问题讨论】：

标签： css internet-explorer-7 pseudo-class

【解决方案1】：

是的，这在 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>

【讨论】：

你能告诉我们 *zoom 的作用吗？
zoom 是一个经常用来欺骗 IE 在元素上设置hasLayout 的属性。这意味着元素负责自己的大小和定位，而不是更多地依赖其父元素。我在属性前面添加了一个星号，因此它只能由 IE7 读取。你可以read more about the star hack here。
进展顺利。你不赞成我报复，也因为你不理解代码。如果仔细观察，您可能会注意到第一个 CSS 表达式创建了一个类为 .ie-after 的元素，而第二个表达式将其注入了 HTML。 Here's a fiddle of the same code.
出于报复，我对你投了反对票，我没有看代码。我刚刚看到了额外的课程并做出了判断。你是对的。我的错。
这是一个荒谬的 hack，我喜欢它。

【解决方案2】：

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

【讨论】：

我同意。我认为这是下载大小的最佳解决方案。下载几字节大小的 gif 和下载几千字节大小的 javascript 是不一样的。
"或 display:inline-block 仅当元素本机显示不是内联时。如果是的话就ok了。
对已接受的答案投反对票。继续拖钓。
@jezenthomas 出了什么问题？赞赏回复，但您的评论没有帮助。
@jezenthomas 哦，来吧。如果问题没有说明更改 HTML 不是一种选择，那么值得建议。 “我的答案更好”不是投反对票的理由；这是一个社区，而不是竞争。 +1 是一个非常明智的选择。

【解决方案3】：

您是否尝试过使用 CSS3Pie

http://css3pie.com/

【讨论】：

【解决方案4】：

http://code.google.com/p/ie7-js/ 项目声称支持:after、:before 和content。您将使用其中的IE8.js 部分。

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

【讨论】：

这是我在打开我的问题之前尝试的第一个解决方案，但奇怪的是它在 IE7 上不起作用。