suchen
HeimWeb-FrontendHTML-Tutorialdiv层显示问题_html/css_WEB-ITnose

部分浏览器如ie7 ,safari等,下层的div会覆盖在上层的div上,这是什么原因呢。
div都没有设置position属性。

如例



就会出来如图状态,这是什么兼容性问题呢?忘指教。谢谢大家~


回复讨论(解决方案)

不会吧,有这种事,贴出你的全部测试HTML和CSS代码

贴出CSS代码。

如果你定成这样




红色的就会覆盖兰色的。

求代码

无码无真相

是限定了高宽吗?尝试着把宽与高调大点。

两个盒子的宽度问题

z-index

啊啊啊啊   不晓得

无代码无真相 

试试 clear:both;

可能是你红色的层设置了float,蓝色的层没有float吧

按照你的代码的写法,不会覆盖,一下一下

有这么怪的事   把代码写一些

翠花--上代码

不好意思最近没在线!谢谢大家的热心帮助。现在我帖出代码,请大家帮我看一下。
ie7, Google Chrome 浏览器,Safari红色边框的那个覆盖上面的层,大家帮我看看什么原因。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title><style type="text/css">/*--------------------------the whole style--------------------------------------------*/body, html, ul, li, img, table, p, div, span{margin:0; padding:0;font-family:SimSun; font-size:12px; color:#000000; }a{margin:0; padding:0;text-decoration:none; color:#000; border:0; }a:hover{ text-decoration:underline;}.c{ margin:0; padding:0;clear:both;}/*--------------------------top style--------------------------------------------*/#top{ margin:0;padding:0; width:100%; height:25px; background:url(../images/topbg.jpg) repeat-x;}#top #header{ margin:0 auto;padding:0; width:1005px;height:auto;}.topleft{ margin:0; padding-top:6px;  color:#000; float:left;}.topright{margin:0; padding-top:6px; color:#000; float:right;}.empty{ margin:0; padding:0; height:16px;}#logo{ float:left;margin-top:10px; margin-right:42px;}.search{ margin-top: 22px;  padding:0; float:left; border:3px solid  #eeeeee; width:338px; }.inputstyle{margin:0; padding:0; width:269px; height:25px; border:1px solid #babebf; border-right:0; float:left;}.time_tel{ float:right; margin-top:10px; width:308px;}#wrap{ margin:0 auto; width:1005px; height:auto;}#banner{ font-family:SimSun; font-size:12px; color:#666;line-height:22px;}#banner #b_left{ margin:0;padding:0; float:left; width:750px; }#banner #b_right{ margin-left:12px; width:242px; float:right; }</style></head><body ><div id="top">  <div id="header">	<div class="topleft">欢迎光临 <a href="#">AAA</a> | <a href="#">BBB</a></div>    <div class="topright"><a href="#">CART</a>  <span class="baobei"> ONE</span>  <a href="#">ABOUT</a> | <a href="contact.asp">CONTACT</a> | <a href="#">HELP</a></div>	  <div class="c"></div>  <div class="empty"></div>  <div>     <div id="logo"><div style="width:264px; height:55px; background:#66CCFF;"></div></div>      <div class="search" >        <input type="text" class="inputstyle"/>      <div style="width:68px; height:27px; float:right; background:#ccc;"></div>      </div>  </div>     <div class="time_tel">      <div style="width:220px; height:55px; background:#FFFFCC; float:right;"></div>     </div>  <div class="c"></div>  <div class="empty"></div>    </div><!--------end header-------------------------------></div><!--------end top---------------------------><div id="wrap">    <div id="banner">		  <div id="b_left">			 <div style="border:1px solid red; float:left; height:350px; width:750px;"></div>				</div><!-----end b_left----->					<div id="b_right">			 <div style="border:1px solid red; float:left;  height:112px; width:242px;"></div>				<div class="empty"></div>			</div><!-----end b_right----->    </div></div>       </body></html>

*--------------------------top style--------------------------------------------*/

#top{ margin:0;padding:0; width:100%; height:25px; background:url(../images/topbg.jpg) repeat-x;}

#top{ margin:0;padding:0; width:100%; height:110px; background:url(../images/topbg.jpg) repeat-x;}

top 设置得太小了,改为100后显示正常

引用 15 楼  的回复:
*--------------------------top style--------------------------------------------*/

#top{ margin:0;padding:0; width:100%; height:25px; background:url(../images/topbg.jpg) repeat-x;}
……
恩恩,谢谢~是我失误失误

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Was ist das Root -Tag in einem HTML -Dokument?Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.

Sind die HTML -Tags und Elemente dasselbe?Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PM

Der Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159

Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PM

Der Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.

Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

Der Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.

Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PM

In Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.

Was sind die verschiedenen Formatierungs -Tags in HTML?Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PM

In dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.

Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PM

Der Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für

Was ist das Attribut 'Klassen' in HTML?Was ist das Attribut 'Klassen' in HTML?Apr 28, 2025 pm 05:37 PM

Der Artikel erläutert die Rolle des HTML -Class -Attributs bei der Gruppierung von Elementen für Styling und JavaScript -Manipulation und kontrastiert sie mit dem eindeutigen 'ID' -attribut.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung