2

10個のセレクター定義を含むスタイルシートがあります。IEとChromeで自分のWebサイトを表示すると（Chromeとまったく同じようにレンダリングされるため、FFは含まれていません）、10個のセレクター定義のうち9個がすべてのブラウザーで一貫して機能します。

動作しないものは、次のように定義されます。

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    position: relative;                  /* This is only needed for IE */
    top: -25px;                          /* This is only needed for IE */
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

ご覧のとおり、IEに必要な値は2つだけです。そこで、条件付きCSSについて調査しました。これで、スタイルシートを取得し、IEの2つの追加エントリを使用して複製を作成しました。

ドキュメントの上部に、次のようになりました。

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

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

これは機能していますが、セレクターレベルで条件ステートメントを実行できませんか？

また、これも機能しなかったCSSドキュメントで試しました。

[if IE] a.dp-choose-date {
    /* definitions here */
}

誰か提案はありますか？

4

4 に答える 4

3

これを行う1つの方法は次のとおりです。

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />

最初のスタイルシートの周りに条件がないことに注意してください。

2番目のスタイルシート内で、タグを次のように定義します。

a.dp-choose-date   {
    position: relative; /* This is only needed for IE */
    top: -25px;   /* This is only needed for IE */
}

スタイルシートの動作方法により、ブラウザは両方の定義を組み合わせて適用します。

于 2011-04-20T21:31:42.810 に答える
1

ターゲットIEにクラスを追加することで、自分で作業を簡単にすることができます。これを行うための良い方法は、次のhtmlような条件で開始タグをラップすることです。

<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]--> 
<!--[if IE 7]><html lang="en" class="ie7"><![endif]--> 
<!--[if IE 8]><html lang="en" class="ie8"><![endif]--> 
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->

これにより、IEのみのセレクターにターゲットにするIEのバージョンをプレフィックスとして付けることができます。

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

.ie6 a.dp-choose-date 
{
    position: relative;
    top: -25px;
}
于 2011-04-20T21:18:34.747 に答える
0

ifHTMLレベルでIEの条件を使用することは、IE（通常は<9）が持つねじれを修正するためのおそらく最良の方法です。条件付きコメントはCSSレベルでは存在しません。（必要に応じて）CSSハックを使用することもできますが、IEの新しいバージョンでは必ずしもこれらのハックが許可されない可能性があるため、これはおそらく最善の解決策ではありませんが、CSSの問題は同じです。

ちなみに、2番目のif条件は、検証のために次のように記述する必要があります。

<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
于 2011-04-20T21:13:21.853 に答える
0

このロジックを実装する最も簡単な方法：

[if IE] a.dp-choose-date {
 /* definitions here */
}

IEの条件付きコメントを使用して、一意の本文タグを書き出すことです。

http://www.positioniseverything.net/articles/cc-plus.html

したがって、次のような結果になる可能性があります。

<body class="ie7">

次に、CSSで、1つのスタイルをオーバーライドする必要がある場合は、次のようにすることができます。

.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}

これの利点：

  • ロードする必要があるCSSファイルは1つだけです（サーバー要求を保存します）
  • CSSは引き続き有効です（醜いCSSハックはありません）
  • あなたのオーバーライドスタイルはあなたの良いスタイルにとどまるので、維持するのがはるかに簡単です
于 2011-04-20T21:20:25.503 に答える