div层显示问题

Enna 2012-04-12 09:48:49

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

如例
<div id="red"></div>
<div id="blue"></div>
就会出来如图状态，这是什么兼容性问题呢？忘指教。谢谢大家~

...全文

345 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

Enna 2012-04-25

打赏
举报

[Quote=引用 16 楼的回复:]

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

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

tyhjx 2012-04-25

打赏
举报

[Quote=引用 15 楼的回复:]
*--------------------------top style--------------------------------------------*/

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



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

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

Enna 2012-04-24

打赏
举报

不好意思最近没在线！谢谢大家的热心帮助。现在我帖出代码，请大家帮我看一下。
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>