2011-09-06 5 views
19

IEはバージョン10で条件付きコメントを取り除くので、私はIE10を対象とした "CSSハック"を見つける必要があります。 セレクタであることに注意してください。CSSのプロパティではなく、「ハッキングされています」。 Mozillaで特定のCSSセレクタはIE10をターゲットにしていますか?

、あなたが使用することができます。

@-moz-document url-prefix() { 
    h1 { 
    color: red; 
    } 
} 

のWebkitに、あなたが通常行う中:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    h1 { 
    color: blue; 
    } 
} 

私はIE10に似た何かをするだろうか?

+0

私はIEの条件付きコメントを使用します。さらに、私の友人や家族の誰もIE 10について知りません。 –

+7

IE10は、おそらくハッキングを必要としないほどの標準に準拠しているでしょう。そしてタイラーは、条件付きのコメントをサポートしていないとの質問をしました。 – BoltClock

+2

@BoltClockは生憎も、標準に準拠したWebブラウザ間でいくつかの奇妙なバリエーションがあります(Webkitの/ Firefoxの/オペラ)ので、セレクタ@など-moz-文書は、すべてのブラウザ間のピクセル完璧な経験を作成しようとしたとき、本当に、アウトに役立ちます。私は、ブラウザがユーザーに対して少し違った体験を見せてくれることを大いに好んでいますが、私のクライアントはそうではありません。 – kunambi

答えて

33

次の例では、実行する方法を示し、この

/* 
#ie10 will only be red in MSIE 10, 
both in high contrast (display setting) and default mode 
*/ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    #ie10 { color: red; } 
} 

警告は:おそらく、あまりにも、IE11 +で動作します。あなたがコードにシンプル+を追加し、CSSからIE10を呼び出すことができますhttp://rafael.adm.br/css_browser_selector/からCSSのブラウザセレクタを使用して

+0

あなたのご意見ありがとうございます、私はこれを答えとして受け入れました。私たちの誰もが心配するべきではないと思う何かです:-) – kunambi

+5

それは危険な考えです。 IE11がリリースされるまでには長い時間がかかるにしても、それはコードがあなたの心の中であまり新しくなく、おそらく修正するのが難しいことを意味します。また、IEの次のバージョンがいつ出てくるかは誰にも分かりません。あるいは、あなたが取り組んでいるバグが修正されます。私は、バグが後のバージョンで修正された場合に壊れない何かのために、このようなハックを使用するだけです。 –

+1

この方法で試してみました。開発環境でのみ動作し、プロダクションでは動作しません。 – agassi0430

3

私の知る限りでは、そのようなCSSセレクタが存在しません。具体的にIE10をターゲットにしたい場合は、body要素にie10という名前のクラスを設定するためのJavaScriptを少し書くだけで、IE10用の特定のスタイルを作成するのはなぜですか?

2

セレクタとプロパティの要件に合っているかどうかはわかりませんが、IE7-9でtext-shadowを偽造してIE10のハックをオフにしようとしているときに、次の方法を思いつきました。キーはIE10で新しい-ms-animationのものを使用することです。

.header { 
    /* For browsers that support it to add a little more punch to a @font-face */ 
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px; 

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */ 
    *font-weight: bold; 
    font-weight: bold\9; 
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
    opacity: 0.75\9; 

    /* Uh oh! We've also caught IE10 in our above hack */ 

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */ 
    -ms-animation: text-shadow 60s infinite; 
} 

/* Define the animation */ 
@-ms-keyframes text-shadow { 
    0%, 100% { 
     font-weight: normal; 
     opacity: 1; 
    } 
} 
+6

これは明らかに狂った男の仕事です! –

5

/msie\s(\d)/を探し、/msie\s(\d+)/に変更します。あなたのCSSで今

ちょうどそのようなあなたのセレクタの前に.ie10を追加します。

.ie10 .class-name { width: 100px; }
.class-name { width: 90px; }

あなたは今、IE10が100pxに幅と90PX幅をレンダリングする他のすべてのブラウザのレンダリング表示されるはずです。

関連する問題