Warum erscheinen meine Tabellen unter meinem schwebenden Element in IE9, wenn ich „overflow:hidden' verwende?-CSS-Tutorial-php.cn

Warum erscheinen meine Tabellen unter meinem schwebenden Element in IE9, wenn ich „overflow:hidden' verwende?

Linda Hamilton

Freigeben： 2024-12-02 12:23:16

Original

238 Leute haben es durchsucht

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

Fehlausrichtung von IE9-Webseitenelementen: „Float“-Problem mit „Überlauf: Ausgeblendet“ und Tabellenbreite

In einem Webseitenlayout ein Der Versuch, ein Containerelement nach rechts zu verschieben und dabei sicherzustellen, dass benachbarte Tabellenelemente 100 % der Breite ausdehnen, führt zu einem Anzeigeproblem IE9.

Problem:

Die Tabellen bleiben unter dem schwebenden Element und stören die gewünschte visuelle Darstellung Anordnung.

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>

Nach dem Login kopieren

Lösung:

IE9-Verhalten kann korrigiert werden, indem der richtige Header sichergestellt wird:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Nach dem Login kopieren

Mit dieser Änderung werden die Tabellen entsprechend erweitert und richtig an den schwebenden Tabellen ausgerichtet Element.

Das obige ist der detaillierte Inhalt vonWarum erscheinen meine Tabellen unter meinem schwebenden Element in IE9, wenn ich „overflow:hidden' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!