div层显示问题_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;}
……
恩恩，谢谢~是我失误失误
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
1666
14
1425
52
1325
25
1273
29
1252
24
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten
Apr 18, 2025 am 12:09 AM
Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.
Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends
Apr 19, 2025 am 12:02 AM
Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.
Die Zukunft von HTML: Evolution und Trends im Webdesign
Apr 17, 2025 am 12:12 AM
Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.
HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick
Apr 16, 2025 am 12:04 AM
Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.
HTML: Erstellen der Struktur von Webseiten
Apr 14, 2025 am 12:14 AM
HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.
HTML vs. CSS und JavaScript: Vergleich von Webtechnologien
Apr 23, 2025 am 12:05 AM
HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.
HTML: Ist es eine Programmiersprache oder etwas anderes?
Apr 15, 2025 am 12:13 AM
HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.
