Une image en dehors de la balise <a> en display:block

NICSS

13 Oct 2008 à 06:31

<!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" xml:lang="fr" lang="fr">
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
a.bb {
	display: block;
	border:1px solid black;
	width:5px;
	height:5px;
}
</style>
</head>
<body>

<a href="#" class="bb"><img src="img/rond.gif" border="0" width="5" height="5" /></a>
	
</body>
</html>

IE et Firefox n'interprètent pas de la même manière l'affichage de l'image (rond rouge) qui, sous IE, comme cela est attendu, se trouve dans la balise <a> en display:block (cadre en bordure noir), tandis que sous Firefox elle se trouve à l'extérieur de la balise.

Peut-on m'expliquer pourquoi, et y-a-t-il une solution pour que l'image soit contenue à l'affichage dans la balises <a>, sans utiliser le background ?

Merci.
Modifié par NICSS (13 Oct 2008 - 06:33)

Heyoan

13 Oct 2008 à 07:07

Salut,

lire le point de la FAQ : Espaces indésirables sous les images.

Une solution possible :

a.bb img {
	display: block;
	border: none;
	width: 5px;
	height: 5px;
}

une autre :

a.bb {
	display: block;
	border: 1px solid black;
	width: 5px;
	height: 5px;
	font-size: 5px;
}

A+

CSS et mise en forme, CSS3

Une image en dehors de la balise <a> en display:block