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 ?-tutoriel CSS-php.cn

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 Olsen

Libérer： 2024-12-13 09:26:10

original

602 Les gens l'ont consulté

Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?

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>

Copier après la connexion

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!