5

私は現在ホームページのテーマを開発していますが、いくつかの問題が発生しました。なんらかの理由で、HTMLコード自体を編集することができず、IE用のカスタム.css（具体的にはIE9より前のバージョン）を作成する必要があります。

「2つの」問題があります。1つ目はデュアルバックグラウンドです。IE9より前のバージョンでは、それらを完璧にレンダリングできるようには見えません。IEが要素をスキップする場合、これは問題ありませんが、この要素のグラフィックは別の要素と連携するため（スムーズなグラフィック遷移のため）、他の要素が奇妙に見えます。この2番目の要素のグラフィックは、divボックス内の背景です。この背景を、ユーザーがブラウザとしてIEを使用している場合にのみレンダリングされる別のカスタム背景にしたいと思います。可能であれば、これをIE9より前のバージョンにのみ適用したいと思います（サイトはIE9では2つの背景でうまくレンダリングされます）。

http://patrikarvidsson.com/project/sohelp/illustration.jpg

CSSは次のとおりです（#mainframeはヘッダーナビゲーションボックスの下の部分です）。下の画像は、IE8でのレンダリング方法です。IE7も同じことを示しています。1つ目はFF/Chrome/SafariとIE9です。

#mainframe {
background: url('img/bg2.png') no-repeat,
            url('img/bg1.png') repeat-y !important;
}

私はネット上でかなり多くのことを検索し、友達にも尋ねてきましたが、これはhtmlマークアップ内に条件付きコメントを書かないと機能していないようです。私は何かが足りないのですか？これは、.cssファイルを使用するだけでどういうわけか実行可能ですか？

サイトはjqueryを使用しています。私はこれを知りませんが、念のために言及したいと思いました。

4

3 に答える 3

9

条件付きコメントを使用してhtml要素にクラスを設定する方法を説明しているこの記事を調べることをお勧めします。次に、そのクラスを使用して、スタイルシート内の特定のブラウザーをクリーンな方法でターゲットにすることができます。

htmlタグは次のようになります。

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]>    <html class="ie7"> <![endif]-->
<!--[if IE 8]>    <html class="ie8"> <![endif]-->
<!--[if IE 9]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

編集2

IE10が条件付きコメントをサポートしないという発表以来、私はこの回答を更新するのがいいと思います。私はそれがサポートするコメントのタイプをテストしました、そして上記はまだうまくいくようです、しかしあなたが10より高いか10だけをターゲットにしたいならあなたは運が悪いでしょう。Microsoft自身がブログ（コメント@MarcoDemaioのリンク）で提案しているように、機能検出を使用する必要があります。

次に、cssで次のようなことを行うことができます。

.somestyle {
    background: transparent url('derp.jpg') no-repeat;
}

/* ie6 fallsback class */
.ie6 .somestyle {
    background: #eee; 
}

記事を読んで、頑張ってください;）

編集2：

IE7はもはや私の最大の関心事ではなく、IE9の動作はかなり一貫しているので、次のコードだけで解決できます（IE9より前のバージョンのIEにのみクラスを追加します）。

<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->

編集1：

「htmlを編集できません」というコメントを見逃してしまいました。

その場合、ブラウザ固有のハックしか使用できません。他に選択肢がない場合は、地獄のように汚いと思いますが、ねえ……

このようなもの：

.someclass {
    *color: blue; /* IE 7 and below */
    _color: blue; /* IE 6 */
}

/* IE6, IE7 - asterisk hack */
.someclass  { *color: blue; }

/* IE8 - winning hack */
.someclass  { color: blue\0/; } /* must be last declaration in the selector's ruleset */
于 2011-10-02T11:37:30.987 に答える
0

私のCMSアプリケーションでこの問題が発生したので...

コンテナdivを作成し、そのクラスにブラウザ名とバージョンを設定します。

<div class="ie_6_0">

<div class="your_custom_elements">
 ///////
</div>

</div>

そしてあなたはCSSクラスが好きですか

.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}

更新1

または好き

<div id="mainframe" class="ie_6_0">
///
</div>

とCSSのような

#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}

ie_6_0：ユーザーのブラウザ名とバージョンがそれを要求し、コードで追加する必要があるため。

于 2011-10-02T10:38:30.640 に答える
0

二重背景の問題については、単に別の包含要素を追加する必要があります。

<div class="element">
...
</div>

になります

<div class="container">
    <div class="element">
    ...
    </div>
</div>

HTMLを手動で編集できない理由はわかりませんが、javascriptファイルにアクセスでき、jQueryを使用している場合は、次のようにクラスを追加できます。

$('.element').wrap('<div class="container" />');

CSSハックを使用して、条件付きコメントの使用を回避できます。CSSハックは、平均的なユーザーが適切に表示するためにハックを必要としないブラウザーを使用しているため、現在はあまり一般的に使用されていませんが、HTML条件ステートメントの使用を回避するための完全に有効で信頼できる方法です。必要な特異性に応じて、IEの特定のバージョンのみをターゲットにするために使用できるさまざまなハックがあります。

* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }

それで：

#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe { 
    background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
    background: url('img/bg2.png') no-repeat\9; }
于 2011-10-02T10:42:39.510 に答える