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 */
}
誰か提案はありますか?