2010-08-17 3 views
0

J'ai un bouton d'édition qui apparaît sur la page lorsque les utilisateurs ont accès à modifier. Je l'ai mis en œuvre comme un lien:image de fond cachée dans IE

<a class='editlink' href='edit.html'></a> 

Mon css correspondant rend la classe EditLink comme une icône de crayon:

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
} 

Cela fonctionne bien dans Firefox, mais ne semble pas du tout dans IE . Si je mets un & nbsp; à l'intérieur de l'étiquette <a> alors il montre le crayon, mais j'espérais garder l'étiquette vide. Y a-t-il une modification que je peux apporter au CSS pour résoudre ce problème?

Répondre

2

Ce bug est un nouveau lié à la propriété hasLayout dans IE.

Essayez d'ajouter

zoom:1; 

à votre style et il devrait fonctionner correctement.

+0

et tout d'un coup mon site entier fonctionne dans IE. Cela a résolu parfaitement. Je vous remercie. –

+0

Content de pouvoir aider! Mieux vaut garder cette chose en mémoire. Il sera plus probable que ne pas apparaître à nouveau un jour ou l'autre. –

0

C'est en fait un problème assez courant dans IE. Même les cellules de tableau sans contenu ne parviennent pas à s'afficher ou à apparaître dans le document. C'est très normal. Mon conseil pour vous serait de garder l'espace là-bas ou de faire le lien "display: block;" puis utilisez la largeur et la hauteur pour le rendre plus grand ou plus petit. Cela a ses propres problèmes associés au positionnement, car il ne sera plus un élément en ligne.

Une alternative solide serait de prendre le lien et procédez comme suit pour elle:

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a> 

Cela permettrait d'assurer qu'il étend l'ancre correctement dans tous les navigateurs.

+0

Merci, Sam. La raison pour laquelle nous ne pouvons pas faire la balise est que notre code génère le lien pour connaître le chemin où se trouve l'image. À moins d'autres solutions, j'irai probablement avec l'option d'espace. –

0

Vous pouvez définir une largeur et une hauteur sur le lien dans votre feuille de style. Cela rend correctement dans FF, IE et Chrome:

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
width: 10px; height: 20px; 
}