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 ?

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 :

<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>


<div class="container">
<div class="sidebar">
<img  src="/static/imghwm/default1.png" data-src="dsfd.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="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 ?" >
</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>

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!