Maison >interface Web >tutoriel CSS >Pourquoi mes tables de 100 % de largeur ne s'étendent-elles pas correctement dans IE9 lors de l'utilisation de « overflow:hidden » et d'éléments flottants ?
Pourquoi mes tables de 100 % de largeur ne s'étendent-elles pas correctement dans IE9 lors de l'utilisation de « overflow:hidden » et d'éléments flottants ?
- Mary-Kate Olsenoriginal
- 2024-12-13 09:26:10593parcourir
Problème flottant IE9 : Débordement : caché et largeur de table à 100 %
Dans une mise en page Web, vous rencontrez un problème particulier où les tables de 100 % width ne parvient pas à s'étendre correctement le long d'un conteneur flottant sur la droite. Ce problème se manifeste exclusivement dans Internet Explorer 9. Pour y remédier, il est crucial de vous assurer que l'en-tête de votre page est correctement configuré.
La solution de contournement pour overflow:hidden dans Internet Explorer consiste à ajouter l'en-tête suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
.container{margin:0 auto; min-width:1000px; max-width:1200px;}
.sidebar{float:right;width:300px;margin-left:5px;}
.tholder{overflow:hidden;}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" height="600" width="295">
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Text</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>text</td></tr></table>
</div>
</div>
</body>
</html>
En implémentant cet en-tête, vous pouvez vous assurer que votre mise en page se comporte de manière cohérente dans Internet Explorer 9, en affichant les tableaux s'étendant correctement à côté des éléments flottants. conteneur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!