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 Hamilton

Libérer： 2024-12-02 12:23:16

original

250 Les gens l'ont consulté

Why Do My Tables Appear Below My Floated Element in IE9 When Using `overflow:hidden`?

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>

Copier après la connexion

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

Copier après la connexion

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!