ページのフッターにナビゲーションバーがあります。これは、もちろんIE7を除いて、すべてセットアップされ、機能しています。パイプ「|」を配置するために:after疑似要素を使用しました それぞれの後<li>
にナビゲーションバーに表示されますが、IE7では表示されません。それは大したことではなく、それほど醜いことでもありませんが、それを汚したり、IE7をだまして機能させるための何かを見つけることができないようです。
4 に答える
いいえ。
2012-01-03の時点で、このスクリプトはIE8の:beforeと:afterのみをサポートしています:http ://code.google.com/p/ie7-js/
2012-01-03の時点で、ここで言及されているSelectivizrには:beforeと:afterがありません。
2012-01-03の時点では、これは準備ができていないようです(多分そうですが):https ://github.com/kevindees/ie7_pseudo_elements
これらの疑似要素をIE7で動作させる方法をしばらく探していましたが、実行できないようです。
個人的には、おそらくjQueryを使用して<span>|</span>
:before
またはを追加し:after
ます。この単純な問題にのみ必要な場合は、ライブラリ全体よりもはるかに軽量になる可能性があります(もちろん、これは、すでにjQueryを使用している場合にのみ意味があります。
$('.element-with-after-class').append('<span class="ie-safe-pseudo-after>|</span>');
また
$('.element-with-before-class').prepend('<span class="ie-safe-pseudo-before>|</span>');
また
$('.element-with-after-class:not(.element-with-after-class:last-child)').append('<span class="ie-safe-pseudo-after>|</span>');
動作するIE7コードは次のとおりです。
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
li {display: inline;}
li {*zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild).className="ie-before" );}
li .ie-before {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '|');}
自分で試したことはありません。
しかし、私はしばらくの間ブックマークを持っています。
チェックしてください:http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/
編集:
いくつかの有用な情報(たとえばjQuery)も含むコメントも必ず読んでください。