IE9 : imbrication de display:table et table-row

Question

Fabien31400

21 Feb 2013 à 11:17

Bonjour,

nous ciblons les navigateurs IE9+, FF 18+ et Chrome 20+ donc nous pouvons utiliser les dernières propriétés du style css display, à savoir : table et table-row.

Dans un exemple très simple, si je définis la propriété "display:table".
Ensuite, pour chaque ligne je définis la propriété "display:table-row" en précisant la height et pour la ligne qui doit occuper la place restante, height est positionné à 100%.

J'ai réalisé le petit exemple suivant qui fonctionne parfaitement sur IE9/FF/Chrome. La partie bleue indique bien la place restante occupée par mon div.


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Test display:table</title>
	
	<style type="text/css">
		#mainDiv
		{
			text-align:center;
		}
		
		#mainPopup
		{
			width: 500px;
			height: 500px;
			border: 1px solid red;
			
			display: table;
			background: red;
			 
			text-align: left;
			padding: 20px;
		}
		
		.ligne
		{
			display: table-row;
			height: 28px;
		}
		
		#ligneDesc
		{
			height: 70px;
		}
			
		.mesLabels
		{
			display: block !important;
			text-align: right;
			width: 70px;
			vertical-align: top;
			margin-right: 10px;
			float: left;
			padding-top: 2px;
		}
		
		.mesChamps
		{
			display: block;
			margin-left: 80px;
			
		}
		
		#txtNom, #txtPrenom
		{
			width: 50%;
		}
		
		#txtDesc
		{
			width: 99%;
		}
		
		#placeRestante
		{
			background: blue;
			height: 100%;
		}
		
    </style>
</head>
<body>
	<div id="mainDiv">
		<div id="mainPopup">
			
			<div class="ligne">
				<label for="txtNom" class="mesLabels">Nom</label>
				<div class="mesChamps"><input id="txtNom" type="text"></div>
			</div>	
			<div class="ligne">
				<label for="txtPrenom" class="mesLabels">Prenom</label>
				<div class="mesChamps"><input id="txtPrenom" type="text"></div>
			</div>
			<div class="ligne" id="ligneDesc">
				<label for="txtDesc" class="mesLabels">Description</label>
				<div class="mesChamps"><textarea id="txtDesc"></textarea></div>
			</div>
			
			<div id="placeRestante" class="ligne">place restante</div>
		</div>
	</div>
</body>
</html>

Maintenant, j'ai complexifié un petit peu le premier cas en remettant un composant qui utiliserait : "display:table et display:table-row" pour occuper la place verticale restante.
Mon deuxième exemple fonctionne encore parfaitement sur FF/Chrome (la partie orange occupe la place restante) mais sur IE9, je ne comprends il refuse de se comporter comme les deux autres navigateurs.


<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Test display:table</title>
	
	<style type="text/css">
		#mainDiv
		{
			text-align:center;
		}
		
		#mainPopup
		{
			width: 500px;
			height: 500px;
			border: 1px solid red;
			
			display: table;
			background: red;
			 
			text-align: left;
			padding: 20px;
		}
		
		.ligne
		{
			display: table-row;
			height: 28px;
		}
		
		#ligneDesc
		{
			height: 70px;
		}
			
		.mesLabels
		{
			display: block !important;
			text-align: right;
			width: 70px;
			vertical-align: top;
			margin-right: 10px;
			float: left;
			padding-top: 2px;
		}
		
		.mesChamps
		{
			display: block;
			margin-left: 80px;
			
		}
		
		#txtNom, #txtPrenom
		{
			width: 50%;
		}
		
		#txtDesc
		{
			width: 99%;
		}
		
		#placeRestante
		{
			background: gray;
			height: 100%;
		}
		
    </style>
</head>
<body>
	<div id="mainDiv">
		<div id="mainPopup">
			
			<div class="ligne">
				<label for="txtNom" class="mesLabels">Nom</label>
				<div class="mesChamps"><input id="txtNom" type="text"></div>
			</div>	
			<div class="ligne">
				<label for="txtPrenom" class="mesLabels">Prenom</label>
				<div class="mesChamps"><input id="txtPrenom" type="text"></div>
			</div>
			<div class="ligne" id="ligneDesc">
				<label for="txtDesc" class="mesLabels">Description</label>
				<div class="mesChamps"><textarea id="txtDesc"></textarea></div>
			</div>
			
			<div id="placeRestante" class="ligne">
				<div style="display: block; width:100%; height: 100%;">
						<div style="display:table; width: 100%; height: 100%">
							<div class="ligne">
								<label for="txtNom" class="mesLabels">Nom</label>
								<div class="mesChamps"><input id="txtNom" type="text"></div>
							</div>	
							<div class="ligne">
								<label for="txtPrenom" class="mesLabels">Prenom</label>
								<div class="mesChamps"><input id="txtPrenom" type="text"></div>
							</div>
							<div class="ligne" style="height: 100% !important; background: orange;">je devrais prendre toute la place restante en hauteur...</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

J'ai un div de type block avec width et height valorisés à 100% mais dans IE9 le div n'occupe pas toute la place mais fait comme si l'élément était inline...
Avez-vous une idée du pourquoi et comment pourrais-je corriger cette anomalie ?

Merci pour votre aide,
Fabien

Sujet clos

CSS et mise en forme, CSS3

IE9 : imbrication de display:table et table-row