2010-12-13 15 views
2

J'ai deux étiquettes avec la même classe. Il est mon de cette classe css:IE7 étrange comportement de l'arrière-plan

.required 
{ 
    background-image:url(/img/required.png); 
    background-position: right; 
    background-repeat:no-repeat; 
    padding-right:10px; 
} 

Dans tous les navigateurs deux éléments a une étoile rouge en haut à droite. Mais dans IE 7 seul le premier élément a cette étoile. Qu'est ce que je fais mal? Aidez-moi, s'il vous plaît.

+0

Je ne vois rien de mal avec ce code. Pourriez-vous fournir un lien vers un exemple de travail? (peut-être sur jsfiddle.com si vous ne pouvez pas nous montrer votre site actuel) – Spudley

Répondre

1

@ Alexander.Plutov: L'utilisation d'un required.png que je borrowed pour l'exercice, l'échantillon de code suivant semble fonctionner très bien (je juste condensé vos CSS règles à la version abrégée):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 

<style type="text/css"> 
.required 
{ 
    background: url(img/required.png) no-repeat right top; 
    padding-right: 15px; 
} 
</style> 
</head> 

<body> 

<form action="4430474.htm" method="post"> 
    <div> 
     <label for="field1" class="required">Field 1:</label> 
     <input type="text" name="field1" id="field1" size="40" /> 
    </div> 
    <div> 
     <label for="field2" class="required">Field 2:</label> 
     <input type="text" name="field2" id="field2" size="40" /> 
    </div> 
</form> 

</body> 
</html> 

employez-vous peut-être des float ou position règles pour quoi que ce soit dans votre forme? Ce sont généralement les choses qui se comportent mal dans IE6/7.

+1

Vraiment merci. Votre note sur la position dans la forme est correcte. Mon formulaire a une classe de dialogue UI. Et cette classe a la règle css 'position: relative'. si je supprime la classe d'interface utilisateur tout est OK. Mais j'ai besoin de cette classe ( – pltvs

+0

@ Alexander.Plutov: Si vous commentez juste cette ligne '/ * position: relative * /' dans votre 'CSS', vous devriez être capable de garder les autres styles intacts. réponse car il peut également être un problème de 'DOCTYPE': http://stackoverflow.com/questions/2945660/jquery-ui-dialog-when-opened-ie7-browser-moves-instantly-to-the-bottom-of- le-p/2976833 # 2976833 – stealthyninja

1

Je ne sais pas si cela changerait quelque chose, mais avez-vous essayé

label .required 
{css here}