Maison >interface Web >tutoriel CSS >Pourquoi mes tables apparaissent-elles sous mon élément flottant dans IE9 lorsque j'utilise « overflow:hidden » ?
Pourquoi mes tables apparaissent-elles sous mon élément flottant dans IE9 lorsque j'utilise « overflow:hidden » ?
- Linda Hamiltonoriginal
- 2024-12-02 12:23:16251parcourir
Désalignement des éléments de page Web IE9 : problème de « flottement » avec « débordement : caché » et largeur de tableau
Dans une mise en page de page Web, un tenter de faire flotter un élément de conteneur vers la droite tout en garantissant que les éléments de table adjacents s'étendent sur 100 % de la largeur fait face à un problème d'affichage dans IE9.
Problème :
Les tableaux restent en dessous de l'élément flottant, perturbant le visuel souhaité arrangement.
Code :
<head>
<style>
.container{margin:0 auto; min-width:1000px; max-width:1200px;}
.sidebar{float:right;width:300px;margin-left:5px;}
.tholder{overflow:hidden;}
</style>
</head>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" heigh="600" width="295">
</div>
<div class="tholder">
<table><tr<td>Text</td></tr></table>
</div>
<div class="tholder">
<table><tr<td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<table><tr<td>text</td></tr></table>
</div>
</div>
Solution :
Le comportement d'IE9 peut être corrigé en garantissant l'en-tête approprié :
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
Avec cette modification, les tables s'étendront de manière appropriée, en s'alignant correctement avec le flotteur. élément.
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!