web-dev-qa-db-ja.com

CSSハックの書き方 IE 11？

IE 11に対してのみcssをハッキングまたは作成するにはどうすればよいですか。私はIE 11.でひどく見えるWebサイトを持っています。

CSSセレクタはありますか？

csscss-selectorsinternet-explorer-11css-hack
166
user2135651

IE11をフィルタリングするには、Microsoft固有のCSSルールを組み合わせて使用​​します。

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

このようなフィルタは、次の理由で機能します。

ユーザエージェントがセレクタを解析できないとき（つまり、CSS 2.1が有効でないとき）、セレクタとそれに続く宣言ブロック（もしあれば）も無視しなければなりません。

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

参考文献

243
Paul Sweatte

進化するスレッドに照らして、私は以下を更新しました。

IE 11（以上）

_:-ms-fullscreen, :root .foo { property:value; }

IE 10以上

_:-ms-lang(x), .foo { property:value; }

または

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .foo{property:value;}
}

IE 10のみ

_:-ms-lang(x), .foo { property:value\9; }

IE 9以上

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  //.foo CSS
  .foo{property:value;}
}

IE 9と10

@media screen and (min-width:0\0) {
    .foo /* backslash-9 removes.foo & old Safari 4 */
}

IE 9のみ

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 //.foo CSS
 .foo{property:value;}
}

IE 8、9、10

@media screen\0 {
    .foo {property:value;}
}

IE 8標準モードのみ

.foo { property /*\**/: value\9 }

IE 8

html>/**/body .foo {property:value;}

または

@media \0screen {
    .foo {property:value;}
}

IE 7

*+html .foo {property:value;}

または

*:first-child+html .foo {property:value;}

IE 6、7、8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6と7

@media screen\9 {
    .foo {property:value;}
}

または

.foo { *property:value;}

または

.foo { #property:value;}

IE 6、7、8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6

* html .foo {property:value;}

または

.foo { _property:value;}

JavaScriptの代替物

Modernizr

Modernizrは機能を検出するためにページロードを素早く実行します。それはそれから結果でJavaScriptオブジェクトを作成し、html要素にクラスを追加します

ユーザーエージェントの選択

Javascript：

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

以下をhtml要素に追加します（例）。

data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

非常に的を絞ったCSSセレクターを許可する。

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

脚注

可能であれば、ハッキングなしで問題を特定して修正します。サポート プログレッシブエンハンスメント および グレースフルデグラデーション 。しかし、これは常に得られるとは限らない「理想的な世界」のシナリオです。そのため、上記の方法がいくつかの良い選択肢を提供するのに役立ちます。

帰属/本質的な読書

204
SW4

これがIE10と11へのハックである2段階の解決策です。

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

iE10とIE11は-ms-high-cotrastをサポートしているため、この2つのブラウザをターゲットにしてこの利点を利用できます

これからIE10を除外したい場合は、ユーザーエージェントのトリックを使用して、次のようにIE10固有のコードを作成する必要があります。

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

そしてこのHTMLタグ

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

そして今、あなたはこのようにあなたのCSSコードを書くことができます

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

詳細については、このWebサイトを参照してください。 wil tutorail 、 Chris Tutorial

そしてもしあなたがIE11以降をターゲットにしたいのなら、これが私が見つけたものです：

_:-ms-fullscreen, :root .selector {}

これはより多くの情報を得るための素晴らしいリソースです：browserhacks.com

62
Hbirjand

2013年の秋から私はこれらを書いてBrowserHacks.comに寄稿してきました - これは私が書いたものはとてもシンプルでIE 11によってのみサポートされています。

<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>

そしてもちろんdiv ...

<div class="msie11">
    This is an Internet Explorer 11 CSS Hack
<div>

そのため、テキストはInternet Explorer 11では青で表示されます。それを楽しんでください。

-

私のライブテストサイトでは、IEや他のブラウザCSSハックがさらに見られます。

更新： http://browserstrangeness.bitbucket.io/css_hacks.html

ミラー： http://browserstrangeness.github.io/css_hacks.html

（あなたもMS Edge CSS Hacksを探しているなら、それはどこへ行くべきかです。）

23
Jeff Clayton

スタイルタグ内で次のコードを使用できます。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
/* IE10+ specific styles go here */  
}

以下は私のために働いた例です：

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

（＃nav li）と（#nav a）は@media画面の外側にあるので、一般的なスタイルです。

6
hoooman

条件付きコメント の標準を維持するために、jsを使用してhtmlにクラスを追加できます。

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

またはクッパのようなライブラリを使用します。

https://github.com/ded/bowser

または特徴検出のためのmodernizr：

http://modernizr.com/ /

1
Liko

それで、私は結局この問題に対する私自身の解決策を見つけました。

Microsoftのドキュメントを検索した後 私は新しいIE11専用のスタイルmsTextCombineHorizontalを見つけることができた

私のテストでは、私はIE10スタイルをチェックし、それらがポジティブマッチであれば、それから私はIE11のみスタイルをチェックします。見つけた場合はIE11 +、見つからなかった場合はIE10です。

コード例： CSS Capability Testing（JSFiddle）によるIE10とIE11の検出

発見したら、もっと多くのスタイルでコード例を更新します。

注：これらのスタイルはおそらく持ち越すので、これはほぼ確実にIE12とIE13を "IE11"として識別します。新しいバージョンが公開されたら、さらにテストを追加します。そして、できればModernizrに再び頼ることができるでしょう。

私はフォールバック動作のためにこのテストを使っています。代替動作は、魅力的ではないスタイルです。機能性が低下することはありません。

1
HDT

私はこれが参考になった

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

<head>ドキュメントの下にこれを追加してください

0
ikke aviy