IEが：afterをサポートしていないのを回避するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/813419

質問

リストがたくさんあります

<ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

スタイル付き

li:after {
  content: ' / ';
}
li.last:after {
  content: '';
}

これは一種のありふれた問題でなければなりません。私は、HTMLを散らかして文字を含む中間<li>に入れるか、IEが読み込みブラウザである場合にJavaScriptをフックしてそこに入れることができると考えていますが、それなしで人々を捕まえませんjavascript。井野。私はhtmlを散らかすことに傾いていますが、これについて意見があるかどうか聞きたいです。

役に立ちましたか？

解決

  1. IE7.js ハックを使用して、擬似要素のサポート後に追加します。
  2. 条件付きコメントを使用してマークアップに追加し、その効果をシミュレートするか、既存のスタイルの一部を削除して区切りなしで読みやすくします。たとえば、リストアイテムを条件付きコメントのスタイルシートにスタックさせます
  3. 他のブラウザで外観が異なっていても、これが起こらないようにスタイルを再配置することにより、IE6が適切に劣化することを許可します。

他のヒント

Internet Explorer （IE）：afterセレクターをサポートしていません、代わりに何らかのハックを使用する必要があります、たとえば次のように： 

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }

<！> quot; xkcd150 <！> quot; -これは各<li>の後に追加されます。

その式は、通常、一部のIEバグを置換および修正するために使用されます。

つまり、完全なコードは次のとおりです。

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }

li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }

最初の行は<！> quotを追加します。 / <！> quot;、2番目は何も追加しないために使用されます。

すべてのコードをcssファイルに追加する必要があります。

これは気に入らないアイデアです。 8-）/記号を背景画像として、<li> sの右側のパディングに入れます。

リストHTMLを生成するとき、サーバー側の言語でそれを行うだけです。 <！> quot; HTMLが乱雑になっている<！> quot;と見なされると思います。

JavaScriptと条件付きコメントを使用します。つまり、jQueryを使用しています。

 <!--[if IE 6]>
   <script type='text/javascript'>
     $(document).ready( function() {
      $('li').not('li.last').after('/');
     });
   </script>
 <![endif]-->

別個のJSファイルを使用する方が良い方法です。
これには、優れたブラウザーの場合はCSSに、IE6の場合はjavascriptですべてを記述するため、すべてを2回記述する必要があるという欠点もあります。

jQueryのようなものを使用してみてください。

`$（function（）{

$（ 'li'）。not（ '：last-child'）。append（ '\' '）;

}）; `

htmlが乱雑になることはありません。 また、これをIEでのみ動作させるには、jquery互換性を使用してみてください。

実行時にコンテンツが変更されない場合は、次を使用できます。

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;');
}

コンテンツが実行時に変更されることを意図している場合、次のようなことができます：

.icon-glass {
  *top:expression(0, this.innerHTML = '&#xf000;');
}

残念ながら、これは非常に遅いです。 IE6ではパフォーマンスが大幅に低下しますが、ページにアイコンが多すぎるとIE7がクラッシュする可能性があります。したがって、使用するアイコンが非常に少なく、パフォーマンスを低下させる余裕がない限り、この2番目の手法はお勧めしません。

そしてIEが最後の子をサポートする場合、class = <！> quot; last <！> quot;を実行する必要はありません。 ：P。

IEのサポートはこれまでもこれからも継続されます。 IE 8は大幅な改善を行いました。予想どおり、：afterおよび：beforeの作業ですが、IE 7もそれらをサポートしています。特にMicrosoftがWindows UpdateでIE 8を推進しているため、これら2つをターゲットにします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top