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

はい、これは 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>​
于 2012-09-04T07:56:08.900 に答える
0

ie7 専用の条件付きコメントのスタイル .arrow。ie7 は :after,:before,:content または display:inline-block を理解していません。サイトを見ずに、確実な修正を提供することは困難です。率直に言って、私はそれをdisplay:block;にします。text-indent を使用し、background-image を使用します。

于 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 に答える
0

CSS3Pieを使ってみましたか

http://css3pie.com/

于 2011-11-21T01:06:54.880 に答える