部分浏览器如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;}
……
恩恩,谢谢~是我失误失误

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

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

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.

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.

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.

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.

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

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.


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

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

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
Leistungsstarke integrierte PHP-Entwicklungsumgebung
