2009-05-01 6 views
2

私はこれが当たり前の問題のようなものでなければならリストIEをサポートしていない場合の対処方法:後で?

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

でスタイル

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

の束を持っています。私はHTMLを混乱させて、仲介者を入れて<li>のキャラクターが入っていると思っています。もしIEが読み込みブラウザであれば、JavaScriptをフックしてJavaScriptを入れてもらえません。イノ私はhtmlを乱雑に傾けているが、これに関する意見があるかどうか聞いてみたい。

答えて

2
  1. 擬似要素のサポート後に追加するには、IE7.jsハックを使用してください。
  2. 条件付きコメントを使用してその効果をシミュレートするか、または既存のスタイルの一部を削除して、仕切りなしで読むことができるようにする - 例えば、条件付きコメントでスタイルシートにリスト項目を積み重ねるようにする。
  3. 他のブラウザと異なって見えても、IE6のスタイルを並べ替えることで正常に機能しなくなります。
+0

ああ、忘れましたすべての条件付きコメントについて。彼らはhtmlを乱雑にする最も不規則な方法でなければならない – xkcd150

1

リストHTMLを生成するときにサーバー側の言語で行うだけです。私はそれが "HTMLを混乱させる"と考えられるだろうと思う。

+1

あなたはすべてのクライアントでこれを行いますが、CSSを気にすることはありませんか、IEをユーザーエージェントから突き止めますか? – xkcd150

+0

私はちょうどそれをやっています:アフターアワーは特に賢いセレクターではありません。 –

+0

:afterは2001年以降にリリースされたブラウザで十分サポートされています。ユーザーエージェントは信頼できません。 – Anonymous

2

あなたが気に入らないアイデアがあります。 8-)あなたの/記号を背景画像として、<li>の右側の詰め物に入れます。

+0

あなたは真剣です:Dあなたは通常何ですか? – xkcd150

+0

私はスラッシュではなく、このコンテキストで垂直バーを使用しました。その場合はborder-rightを使用できます(たとえば、http://entrian.com/source-search/の上部ナビゲーションメニュー) – RichieHindle

-1

IEがlast-childをサポートする場合、class = "last":Pを実行する必要はありません。

IEサポートはされているし、ごまかさ続けるでしょう。 IE 8は大幅な改善を行いました:あなたが期待していた作業の前と後:IE 7も同様にサポートしています。マイクロソフトがWindows Updateを介してIE 8をリリースしているので、これらの2つをターゲットにしてください。

+0

私はこれのために忘却にmoddedになるだろうと思った:P IE 8はIE 6と比較して絶対に驚くべきことであり、他の標準準拠のブラウザ簡単です。すべてがねじれていない、標準に準拠したレンダリングではない、あるいは少なくともほとんどのボックスモデル。 私が開発しているウェブサイトでは、CSSで1つのハックではなく、IE 8、FireFox、Chrome、Opera、Safariで全く同じレンダリングを実装しています。 –

+0

私はモッズを推測していますが、これはコメントであり、答えではありません。 – Anonymous

+0

クライアントがうまくいてie6をターゲティングしていない場合、私はしません。私はie8の開発についていませんが、それがすべて悪くないと聞くのは良いことです。 – xkcd150

0

私はJavaScriptと条件付きのコメントを使用します。つまりjQueryを使用します。

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

別個のJSファイルを使用するのが良いです。
これは良いブラウザの場合はCSSに、もう一度IE6の場合はjavascriptに入れてから2回すべてを書き込む必要があるという欠点もあります。

3

のInternet Explorer(IE)をサポートしていません。

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

"xkcd150" - これ意志:セレクタ後に我々はこの一例のため、代わりにをいくつかのハックを使用する必要があります。各<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 + '') : ''); } 

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

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

+3

私はこれを極度の巧みさのために投票するのか、それともこれまでにも悪魔のようなハッキングで投票するのかどうかは分かりません。 8-) – RichieHindle

+0

このハックはインラインのjavascriptで、何も使用されていません。そして...それは動作します:) – Mike

0

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

`$(関数(){

$( 'リー')ではない( ':最後の子'))( '\' 'を追加し、

。。});`

これはHTMLを乱雑にしません。 また、IEでのみ動作するようにするには、jquery互換性を使用してみてください。

0

あなたのコンテンツは、実行時に変更するintentedされていない場合は、以下を使用することができます。

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

あなたのコンテンツは、実行時に変更することが意図されている場合は、このような何か行うことができます:

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

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

関連する問題