web-dev-qa-db-ja.com

：afterおよび：before css疑似要素はIE 7

私は使っている :afterおよび:before css疑似要素であり、IE8で正常に動作していますが、すべての最新のブラウザーがIE7で正常に動作していません。 IE7でこれを回避する既知のハックはありますか？

htmlcssinternet-explorer-7pseudo-element
56
Soarabh

純粋なCSSハックでは不可能です。

IE8.jsを使用します http://code.google.com/p/ie7-js/

これをサポートしています。 http://ie7-js.googlecode.com/svn/test/index.html

テストページもあります

後- http://ie7-js.googlecode.com/svn/test/after.html

before- http://ie7-js.googlecode.com/svn/test/before.html

最初のコメントの後に編集

このjsをIE6および7で保持することができます。他のブラウザはそれを読みません。

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

プロジェクトですでにjQueryを使用している場合は、このプラグインを使用できます

jQuery擬似プラグイン

http://jquery.lukelutman.com/plugins/pseudo/

68
Jitendra Vyas

私はプロジェクトでIE8.js（http://code.google.com/p/ie7-js/）を使用していましたが、IE7を10/15秒の間ブロックしたため、削除する必要がありました。

IE8.jsなしで、：afterおよび：before疑似要素で生成されたコンテンツを保持するために、次のことを行いました。

   .tabs {
     *zoom: expression( 
          this.runtimeStyle.zoom="1",
          this.appendChild( document.createElement("small") ).className="after"
         );
   }

   .tabs:after,
   .tabs .after {
     content: '';
     display:block;
     height:10px;
     width:100%;
     background:red;
   }

私はjavascriptよりもこの方法を好む、なぜならこれはすべてのセレクターを同じ場所に保持するからだ:)

52
vieron

これを使用する前と後に：

.tabs {
    *zoom: expression(
        this.runtimeStyle.zoom="1",
        this.insertBefore(
            document.createElement("div"),
            this.childNodes[0]
        ).className="before",
        this.appendChild(
            document.createElement("div")
        ).className="after"
    );
}

...

.tabs::before, .tabs .before {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #eee;
    float: left;
}
.tabs::after, .tabs .after {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #c0c;
    float: left;
}
4
atiruz

すでに Modernizr を使用している場合、「CSS生成コンテンツ」のコア検出があります。

その後、不足している:before または :after JavaScriptを使用します。例えば：

.selector:before, .selector-before {
    content: "Hello, world!";
    color: red;
}

生成されたコンテンツをDOMに直接挿入するjQuery：

if (!Modernizr.generatedcontent) {
    $('.selector').prepend('<span class="selector-before">Hello, world!</span>');
}
3
Blazemonger

まあ、機能する純粋なCSSハックがあります。それは黒魔術ですが、まれにしか使用されない場合に便利です。

ここで説明します： http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php http://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php

HTMLフラグメント：

<div id="container">
 <!-- -->
 <div class="mainContent">
  <p>Blah blah</p>
  <p>Blah blah</p>
  <p>Blah blah</p>
  <!-- -->
 </div>
</div>

CSS：

#container:before
{
 background: url("corners-top.png");
 content: "";
 display: block;
 height: 24px;
}

#container .mainContent:after
{
 background: url("corners-bottom.png");
 content: "";
 display: block;
 height: 28px;
}

IE固有のスタイルシート：

#container *
{
 background: url("corners-top.png");
 display: list-item;
 font-size: 24px;
 line-height: 24px;
 list-style: none;
}

#container .mainContent
{
 background: none;
 display: block;
 font-size: 1em;
 line-height: 1.25;
}

#container .mainContent *
{
 background: url("corners-bottom.png");
 font-size: 28px;
 line-height: 28px;
}

/*
  Now, still in the IE-specific stylesheet, remove the styles for all
  element descendants of .mainContent. Refer to each element by tag name.
*/

#container .mainContent p, #container .mainContent div, (And so on...)
{
 background: none;
 display: block;
 font-size: 1em;
 line-height: 1.25;
}
3
Jens

CSS式を使用してこれを行うことができます。たとえば、次の方法で♣記号を接続できます。

expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML)

これについての記事をSmashing Magazineに書きました。 http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/

3
Thierry Koblentz

：beforeと：afterのサポートが必要なときは、私が書いた次の要点を使います。これは純粋なCSS（CSSを記述するという点まで）ですが、CSS式が含まれています。ほとんどの場合に機能します。

https://Gist.github.com/236248

/* =============================================================================
    CSS Declarations
   ========================================================================== */

/* ==|== The Standard Way =================================================== */

.foo::before {
  /* ...css rules... */
}

.foo::after{
  /* ...css rules... */
}


/* ==|== The IE Way =================================================== */
/* NOTE: a comma separated IE & Standard rule won't work.               *
 * IE doesn't understand ::before or ::after & ignores the declaration  */

.lt-ie9 .foo:before,
.lt-ie8 .foo .ie-before {
  /* ...css rules... */
}

.lt-ie9 .foo:after,
.lt-ie8 .foo .ie-after {
  /* ...css rules... */
}


/* =============================================================================
    IE6 & IE7 polyfills
   ========================================================================== */

.lt-ie8 .foo {
  zoom: expression(
    this.runtimeStyle.zoom="1",

    /* ::before polyfill - creates <i class="ie-before"></i> */
    this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",

    /* ::after polyfill - creates <i class="ie-after"></i> */
    this.appendChild( document.createElement("i") ).className="ie-after"
  );
}
2
CoryDorning