0

互換モードのIE8でのみ機能するcssを追加する方法はありますが、IE7またはIE8または（明らかに他のブラウザー）では機能しません???

私のCSSは簡単です

h1 {
   font-size:14px;
}

ただし、font-size は IE8 (互換モード) でのみ機能する必要があります

注: IE8 を検出するための条件ステートメントの書き方は知っていますが、IE8 互換モードでの実行方法はわかりません。

4

5 に答える 5

2

次のような IE8 の CSS ハック:

h1{font-size:14px\0;}
于 2012-10-26T11:54:30.370 に答える
1

残念ながら、IE8互換モードだけに適用する方法はありません。ただし、IE8CMはIE7エミュレーターであるため、まったく同じIE7を表示します。次のコードのようなものを使用できますが、IE7にも適用されます。

<!--IE9 compatibility mode & IE8:-->
  <!--[if IE 8]>
    <p>Welcome to Internet Explorer 8.</p>
  <![endif]-->

<!--IE8 compatibility mode & IE7:-->
  <!--[if IE 7]>
    <p>Welcome to Internet Explorer 7.</p>
  <![endif]-->

IE7にも適用できない理由はありますか？IE8の互換モードの問題を修正するために行っているハックは、IE7でも必要です。

于 2012-10-26T13:13:08.083 に答える
0

コードのhtmlタグの前に以下のコードを追加する必要があります。

<!--if IE 8>
<html class="IE8">
<[endif]-->
<html>
...
</html>

そしてCSSファイルでこれを行います：

.IE8 h1{
font-size:14px;
}

これはIE8でのみ機能します。

于 2012-10-26T09:33:22.350 に答える
0

css ハックを使用します。

     body{
         color:red;           /*every browser*/
         color:blue\9;        /*IE8 or below*/
     }
于 2013-12-05T14:55:49.960 に答える
0

変更された DocType がない限り、互換モードは IE 7 以下としてレンダリングされるため、互換モードの場合、IE 7 でもレンダリングされることがよくあります。

ただし、それでも実行できます。ユーザー エージェント文字列を確認すると、そのように区別できます。IE 8 以降では、ユーザー エージェント文字列に「Trident」という単語が含まれているため、IE 7 以下としてレンダリングされていても、uagent に「Trident」という単語が表示される場合は、互換モードである必要があります。

ほとんどの人はこれが必要だとは思いませんが、私には理由がありました。私の以前のプロジェクトの 1 つで、新しいブラウザーを処理するようにアプリケーションを変更できるようになるまで、互換モード オプションを使用するように人々に伝える必要がありました。誰もが指示を読むわけではないので、何をすべきかを伝えるには、ポップアップ メッセージが最適な方法であることがよくあります。

私が書いてドキュメントの先頭に置いたこの修正版のスクリプトは、うまくいきました。

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':''; } 
</script>

したがって、javascript 変数 ie_mode は、「ie_compatibility_mode」または「not_ie_compatibility_mode」のいずれかに設定されます。

document.documentElement.className+=ie__mode; を追加するとします。次のように、ドキュメント自体に css クラスを追加するようにスクリプトに追加します。

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; } 
</script>

次に、どちらのモードでもドキュメントで css を使用できます。スタイルの例:

<style type="text/css">

    html { color:#000000; }

    /* default settings: start with all items 'off' */

    .hide_element { display:none; visibility:hidden; }

    .ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }

    .not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#666666; }

</style>

そして本体でこれを行うことができます：

<body>

If you are using internet explorer there will be more here: 

<br><br>

<script language="javascript" type="text/javascript"> 
    if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>

<br><br>

<div class="hide_element display_compatibility_mode">
   This is in compatibility mode. [this should show up in orange]
</div>

<div class="hide_element display_not_compatibility_mode">
   This is not in compatibility mode. [this should be show up in blue]
</div>

</body>

以下は、すべてのパーツをまとめた完全な作業ページです。

<!DOCTYPE html>
<html>
<head>
<title>HTML Class Setting / Detect Compatibility Mode Example - Jeff Clayton</title>

<script language="javascript" type="text/javascript"> 
if (!!navigator.userAgent.match(/MSIE/i)) { 
   ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; } 
</script>

<style type="text/css">

/* default settings: start with all items 'off' */

.hide_element { display:none; visibility:hidden; }

.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }

.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#0000FF; }

</style>

</head>

<body>

If you are using internet explorer there will be more here: 

<br><br>

<script language="javascript" type="text/javascript"> 
    if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>

<br><br>

<div class="hide_element display_compatibility_mode">
   This is in compatibility mode. [this should show up in orange]
</div>

<div class="hide_element display_not_compatibility_mode">
   This is not in compatibility mode. [this should show up in blue]
</div>

</body>
</html>
于 2014-06-14T07:07:37.783 に答える