2012-04-25 17 views
0

私は次のCSSを使用して、背景画像を自分のdivの100%のサイズにします。CSS HTML非ie7またはie8のCSSを無視する方法

#solutionsNav div.leadgen { 
background:url(/images/leadGen_bg2.png) no-repeat; 
background-size: 100% 100%; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')"; 
behavior: url(/scripts/PIE.htc); 
padding: 10px; 
color: #FFF; 
cursor: pointer; 

}

これは、すべてのブラウザで今動作しているようですが、唯一の問題は、IE7とIE8で、私は背景の概要を見ることができるということである:URL(/images/leadGen_bg2.png)とき画像はdivに収まるように引き伸ばされます。そして私は、私がバックグラウンドを取り除くと、上記のIE7とIE8ではうまく動作しますが、もはやfirefoxで見ることができないということをテストしました(url(/images/leadGen_bg2.png))。

どうすればこの問題を回避できますか?

答えて

3

条件付きコメントを使用してIE8以下のスタイルシートのみを読み込み、すべてのhaxを読み込むために使用します。

<!--[if lte IE 8]> 
#solutionsNav div.leadgen { background: none; } 
<![endif]--> 

それが優先されるように、あなたはあなたの答えで定義されたこのルールは、ルールの後に来ることを確認してください:Kolinkの答えに拡大すること

<!--[if lte IE 8]><link rel="stylesheet" href="ie-hax.css" /><![endif]--> 
+0

これは何をすべきかを示しています。私はスタイルシートがどのように実装されるかを制御できません。とにかくCSSファイルには、どのようなブラウザが何をすべきかを実装するためのものがありますか?IE7のIEです。私は*できますか?IE8のようなものはありますか? – StevieB

0

。あなたのIEのハックのための別のスタイルシートを使用することは良いアイデアです。

0

私はこの問題を回避するためにconditional classesを使用します。たとえば、あなたはこれであなたの開口部<body>タグを交換する場合:

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

...あなたは、一連のクラスは、Internet Explorerで特異的に標的化さ取得します。

/* Good browsers */ 
#solutionsNav div.leadgen { 
    background:url(/images/leadGen_bg2.png) no-repeat; 
    background-size: 100% 100%; 
    padding: 10px; 
    color: #FFF; 
    cursor: pointer; 
} 
/* IE-specific code */ 
.oldie #solutionsNav div.leadgen, 
.ie8 #solutionsNav div.leadgen { 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')"; 
    behavior: url(/scripts/PIE.htc); 
} 
関連する問題