div层显示有关问题续-HTML教程-爱易网页

div层显示有关问题续

日期：2014-05-17　浏览次数：20827 次

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

HTML code


<!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层显示有关问题续

相关资料更多>

推荐阅读更多>