div层显示问题_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

div层显示问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:10 PM

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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Apr 05, 2025 pm 01:24 PM

Bagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...

Apakah elemen HTML yang digunakan oleh editor kod dalam talian untuk melaksanakan input kod?Apr 05, 2025 pm 01:21 PM

Analisis elemen HTML dalam editor kod web Banyak editor kod dalam talian membolehkan pengguna memasukkan kod HTML, CSS, dan JavaScript. Baru -baru ini, seseorang mencadangkan ...

See all articles