0

HTML5 Bolierplateを使用する WordPress テーマがあります。また、 Jetpack プラグインの「Edit CSS」モジュールを使用して、テーマの CSS を変更および追加します。

Jetpack の「CSS の編集」モジュールを使用して、さまざまな WordPress ウィジェットの見出し用に 3 次元の CSS テキスト シャドウをいくつか定義しました。

.example-widget h3{   
    color: #fff;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}

問題は、Internet Explorer では、3D テキストの影がサポートされておらず (少なくとも IE9 までです。IE10 ではテストしていません)、白いフォントは非常に明るい色の背景では機能しません。IE では#444、3D テキスト効果を置き換えるために の色が必要です。

Bolierplate では で次の<head>ように定義されていますが、IE のすべてのバージョンでフォントの色を定義する方法がわかりません。

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

邪魔にならないように、WordPress Answersではなく、なぜこの質問をここに置くのかを正当化するよう求められると確信しています- 理由は、これはWordPress固有の質問ではないと言うでしょうが、モジュール内の CSS はすべてのスタイル シートがテーマで定義された後に読み込まれるため、Jetpack の「Edit CSS」モジュールが機能する可能性がある場合。

4

3 に答える 3

2

これを行う2つの簡単な方法。

機能検出 - Modernizr を参照してください。<-- 優先オプション

これは、ブラウザが をサポートしているかどうかだけで、ブラウザのバージョンをチェックしませんtext-shadow。ページの上部にある Modernizr スクリプトを呼び出します。次に、次のようなクラスを作成します。

.example-widget {
    color: blue;
}

.no-text-shadow .example-widget {
    color: red;
}

条件付きコメント

これを行う私のお気に入りの方法は、すべての CSS を 1 つのファイルに保持できるためです。

<!--[if lt IE 7]>      <html class="no-js ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie ie9"> <![endif]-->
<!--[if gt IE 9|!IE]><!--> <html class="no-js"> <!--<![endif]-->

次に、次を使用します。

.example-widget {
   color: blue;
}

.ie .example-widget {
   color: red;
}
于 2013-02-06T07:36:38.590 に答える
2

スタイルを ie 条件付きでラップします -

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

次に、 all-ie-only.css stylehseet で、次のようなものが必要です-

body {
    color: red;
}

上記をオーバーライドする要素のオーバーライドを作成する必要がある場合もあります。例えば ​​-

.example-widget h3 { 
    color: red;
}
于 2013-02-06T07:21:18.167 に答える
0

InternetExplorerの条件付きコメントを使用できます。<head>タグに条件付きコメントを追加します。以下は、条件付きコメントを理解するInternetExplorerのすべてのバージョンに適用されます。

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

cssファイル（この例ではiecss.css）に次のクラスを追加します

.example-widget h3 {
   color: #444
}

.example-widgetInternet Explorerは、3D効果を持つ元のクラスの代わりに、このクラス（色：＃444）を使用します。

Internet Explorerの条件付きコメントの詳細については、次の記事を参照してください：http: //reference.sitepoint.com/css/conditionalcomments

于 2013-02-06T07:29:43.493 に答える