Internet Explorer 7.0 CSS Hack

Question

J'ai besoin d'insérer un Hack sur une page web, donc ça marche bien sur IE7.0 Mais j'ai des problèmes avec la façon dont je fais les choses. Cela devrait être simple.

Le code CSS réel est le suivant:

<style type="text/css"> 
body { margin:0;} 
#home_splash { background-image:url(homeimages/image-background.jpg);background-repeat:repeat-x; background-position:left top;} 
#home_splash #home_text { height:470px; padding-top:25px;padding-left:38px; } 
#home_splash #home_text_1, 
#home_splash #home_text_2 { display:none; } 
#home_splash #home_text_1 { width:172px; height:58px; top:0px; left:70px; position:relative; background:inherit; background-position: -70px 0px; } 
#home_splash #home_text_2 { width:212px; height:27px; top:460px; left:868px; position:relative; background:inherit; background-position: -868px -460px; } 
#home_splash {background-color:#d1d1d9;margin-top:-15px; background-repeat:repeat;width:100%; } 
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; } 
#home_splash #boxes { margin-left:auto; margin-right:auto;padding-top:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-size:12px; font-weight:bold; height:190px; width:930px;} 
#home_splash #boxes .box { width:33%; float:left; display:block;background-repeat:repeat-x;} 
#home_splash #boxes h3 { font-size:23px; border-bottom: 1px solid #bcbcc4; color:#000033; margin:0; } 
#home_splash #boxes h3, 
#home_splash #boxes p {margin: 4px 25px; } 
#home_splash #boxes p { line-height:160%; } 
#home_splash #boxes .box_separator { border-right:1px solid #eee;} 
ul#nav { width:100%; height:37px; margin:0px;display:block; background-color:#000; background-repeat:repeat-x; } 
#container {background-color:#d1d1d9; zoom:1; } 
#content { margin:0; } 
.splash_text {width:885px; height:463px;} 
</style> 

Je voudrais faire un changement dans ce CSS.

Je voudrais changer la ligne suivante:

#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; } 

Je veux IE7.0 pour enlever la 'margin-top: 20px;' propriété - mais INLINE dans ce fichier html seulement

Answer 1

Les commentaires conditionnels sont exactement ce dont vous avez besoin. Je suppose par « rmeove la marge supérieure: la propriété « 20px, vous voulez dire le mettre à 0 (comme il n'y a vraiment pas d'autre moyen de le supprimer) Voici le code:.

<!--[if IE 7]><style type="text/css">#home_splash .picture { margin-top: 0; }</style<![endif]--> 

bâton Juste que dans votre . fichier HTML, en dessous du CSS vous avez déjà, et vous devriez être d'or

Answer 2

Puisque vous codez dans un fichier HTML, de loin la meilleure option est de commentaires conditionnels:

<!--[if IE 7]> 
Special instructions for IE 7 here 
<![endif]--> 

Voir http://www.quirksmode.org/css/condcom.html pour plus info

Answer 3

Si vous voulez le hack dans le même css que les autres navigateurs:

Rechercher

*+ html #home_splash .picture { background-image: url(homeimage/image.jpg);} 

ici: http://css-discuss.incutio.com/wiki/Star_Html_Hack