首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

div层显示有关问题续

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

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></div>       </body></html>


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


红色部分去掉

热点排行