Der beste Weg, schwebendes CSS für IE7, FF und OP zu löschen
Als ich in der CSS-Forest-Gruppe über ein Margin-Problem diskutierte, entdeckte ich zufällig, dass Overflow auch zum Löschen von Floats verwendet werden kann. Hey, diese Methode ist nicht nur einfach zu verwenden, sondern wird auch von FF, OP und IE7 unterstützt Jetzt können Sie sich von der langen Kompatibilität verabschieden. Eine weitere schlechte Methode zum Löschen von Floats in FF.
Die Methode ist wirklich einfach. Fügen Sie einfach das Überlaufattribut zu der Beschriftung hinzu, die schwebend sein muss.
CSS-Code
ul {
list-style: none;
height: auto;
margin: 0;
p adding: 0;
background-color: #436973;
}
li {
float: left;
width: 80px;
height: 80px;
background-color: #83B1DF;
}
.demo {
clear: both;
border: 1px solid #FF00FF;
margin-bottom: 5px;
}
.overflow {
overflow: auto;
zoom: 1;
background-color: #43FF73;
}
ul {
list-style: none;
height: auto;
margin: 0;
padding: 0;
background-color: #436973;
}
li {
float: left;
width: 80px;
height: 80px;
background-color: #83B1DF;
}
.demo {
clear: both;
border: 1px solid #FF00FF;
margin-bottom: 5px;
}
.overflow {
overflow: auto;
zoom: 1;
background-color: #43FF73;
}HTML-Code
<div class="demo"> <ul class="overflow"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="demo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
wo Zoom für IE6 vorbereitet ist.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSSɭ" />
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />
<title>Overflow hack Demo|www.CSSForest.org</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>
<style type="text/css">
/*<![CDATA[*/
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}
li{float:left;width:80px;height:80px;background-color:#83B1DF;}
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}
/*]]>*/
</style>
</head>
<body>
<p></p>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div>
<div>
<div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div>
<p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>
<p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>
<p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>Hinweis: Ich habe einen sehr wichtigen Punkt vergessen. Nicht alle Überlaufattribute haben den gleichen Effekt. Das sichtbare Attribut kann beispielsweise nur im IE funktionieren. Ein Beispiel ist hier zu sehen:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSSɭ" />
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />
<title>Overflow hack Demo|www.CSSForest.org</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>
<style type="text/css">
/*<![CDATA[*/
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}
li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}
.overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}
.overflow2{overflow:visible;zoom:1;background-color:#43FF73;}
/*]]>*/
</style>
</head>
<body>
<p>overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。</p>
<div>
<ul>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
<li>overflow:auto;</li>
</ul>
</div>
<div>
<ul>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
<li>overflow:hidden;</li>
</ul>
</div>
<div>
<ul>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
<li>overflow:visible;</li>
</ul>
</div>
<div>
<ul>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
<li>no overflow</li>
</ul>
</div>
<div>
<div>
<div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div>
<p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>
<p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>
<p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>In diesem Fall liegt ein Problem vor. Wenn eine Höhe vorhanden ist und der Inhalt diese Höhe überschreitet, kann die Definition von „Auto“ oder „Ausgeblendet“ unerwünschte Auswirkungen haben. Erscheinen. Hier ist eine Lösung: Für IE6 und niedriger können Sie die Höhe direkt definieren; für IE7, FF und OP können Sie die Mindesthöhe definieren.
CSS-Code:
overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
So richten Sie Eingabefelder in HTML aus
Apr 05, 2024 am 10:18 AM
Zu den Methoden zur Verwendung von HTML zum Ausrichten von Eingabefeldern gehören: Verwenden des text-align-Attributs, um links, rechts oder zentriert anzugeben, um den Text des Eingabefelds auszurichten. Verwenden Sie die Eigenschaft „float“, um das Eingabefeld an die linke oder rechte Seite der Seite zu verschieben und so seine relative Ausrichtung zu beeinflussen.
Welche 5 Möglichkeiten gibt es, Floats zu löschen?
Nov 20, 2023 pm 04:27 PM
Die fünf Möglichkeiten zum Löschen von Floats sind: 1. Verwenden Sie das Clear-Attribut. 3. Verwenden Sie das Pseudoelement Clearfix. 5. Verwenden Sie das Grid-Layout. Detaillierte Einführung: 1. Verwenden Sie das Clear-Attribut, die am häufigsten verwendete Methode zum Löschen von Floats. Sie können ein Element nach dem Floating-Element hinzufügen und ihm den Stil „clear: Both;“ hinzufügen Legen Sie das übergeordnete Element fest. Stellen Sie „overflow: auto;“ ein und so weiter.
Gibt es eine Möglichkeit, Floats zu löschen?
Feb 22, 2024 pm 04:00 PM
Gibt es eine Methode zum Löschen von Floats? Im Webseitenlayout sind Floats eine gängige Layoutmethode, die es ermöglicht, Elemente aus dem Dokumentfluss zu lösen und relativ zu anderen Elementen zu positionieren. Bei der Verwendung des Floating-Layouts tritt jedoch häufig das Problem auf, dass das übergeordnete Element das Floating-Element nicht korrekt umschließen kann, was zu einem ungeordneten Layout der Seite führt. Daher müssen wir Maßnahmen ergreifen, um den Float zu löschen, damit das übergeordnete Element das Float-Element korrekt umschließen kann. Es gibt viele Möglichkeiten, Floats zu löschen. Im Folgenden werden einige häufig verwendete Methoden vorgestellt und spezifische Codebeispiele gegeben.
Was ist Layout-Layout?
Feb 24, 2024 pm 03:03 PM
Unter Layout versteht man eine im Webdesign verwendete Schriftsatzmethode, um Webseitenelemente nach bestimmten Regeln und Strukturen anzuordnen und anzuzeigen. Durch ein angemessenes Layout kann die Webseite schöner und übersichtlicher gestaltet werden und eine gute Benutzererfahrung erzielt werden. Bei der Front-End-Entwicklung stehen viele Layoutmethoden zur Auswahl, z. B. traditionelles Tabellenlayout, schwebendes Layout, Positionierungslayout usw. Mit der Förderung von HTML5 und CSS3 sind jedoch moderne responsive Layout-Technologien wie das Flexbox-Layout und das Grid-Layout entstanden
Warum schwebende Elemente nicht durch die Überlaufeigenschaft gelöscht werden können
Jan 27, 2024 am 08:08 AM
Um zu analysieren, warum Floating mit dem Overflow-Attribut nicht gelöscht werden kann, sind spezifische Codebeispiele erforderlich. Einführung: Beim Layout von Webseiten treten häufig Probleme mit Floating-Elementen auf. Um die Auswirkungen schwebender Elemente zu lösen, verwenden wir normalerweise eine Methode zum Löschen von Floats. Manchmal stellen wir jedoch fest, dass Floats mit dem Überlaufattribut nicht gut gelöscht werden können. In diesem Artikel wird dieses Problem genauer untersucht und spezifische Codebeispiele bereitgestellt. 1. Warum müssen wir Floats löschen? Unter Floating-Elementen versteht man das Herausnehmen des Elements aus dem Dokumentfluss durch Festlegen des Float-Attributs.
Die Rolle von Float in CSS
Apr 28, 2024 pm 01:51 PM
Die float-Eigenschaft in CSS ermöglicht es Elementen, aus dem Dokumentfluss auszubrechen und sich am Rand ihres übergeordneten Elements auszurichten. Sie wird zum Erstellen und Ausrichten von Textbildern, schwebenden Menüseitenleisten und überlappenden Elementen verwendet. Zu den Attributwerten von Floating-Elementen gehören left (left float), right (right float), none (clear float) und inherit (inherit). Um zu verhindern, dass ein schwebendes Element einen Überlauf des übergeordneten Elements verursacht, können Sie die Clearfix-Technik verwenden, um ein leeres Element hinzuzufügen und das schwebende Element zu löschen.
Welche Möglichkeiten gibt es, Floats in CSS zu löschen?
Oct 30, 2023 am 11:57 AM
Zu den Möglichkeiten zum Löschen von Floats in CSS gehören klares Attribut, Überlaufattribut, Clearfix-Klasse, Clearfix-Klasse des übergeordneten Elements, Pseudoelement zum Löschen von Float, Überlaufattribut des übergeordneten Elements und eine Kombination aus klarem Attribut und BFC. Ausführliche Einführung: 1. Verwenden Sie das Clear-Attribut, eine einfache und häufig verwendete Methode zum Löschen von Floats, indem Sie nach dem Floating-Element ein leeres Element auf Blockebene hinzufügen und das Clear-Attribut dafür festlegen, können Sie den vorherigen Floating-Effekt löschen und herstellen Die folgenden Elemente sind normal angeordnet und so weiter.
Warum hat der Überlauf-Clear-Float keine Auswirkung?
Oct 17, 2023 pm 02:29 PM
Der Grund, warum der Überlauf-Clearing-Float ungültig ist, kann sein, dass die Höhe des Floating-Elements nicht festgelegt ist, das Floating-Element gelöscht wird, das Clearing-Element vor dem Floating-Element liegt, die Höhe des Clear-Elements nicht festgelegt ist oder das Clear-Element steht hinter dem schwebenden Element usw. Detaillierte Einführung: 1. Die Höhe des schwebenden Elements ist nicht festgelegt. Wenn die Höhe des schwebenden Elements nicht festgelegt ist, wird die Höhe des schwebenden Elements möglicherweise nicht durch seinen Inhalt bestimmt Höhe, das schwebende Element hat auch keine Höhe 2. Floating Das Element wird gelöscht. Wenn das schwebende Element gelöscht wird, wird die Überlaufeigenschaft möglicherweise nicht gelöscht und so weiter.
