div layer display problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

div layer display problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:10:27

Original

1101 people have browsed it

In some browsers such as IE7, Safari, etc., the lower div will cover the upper div. What is the reason?
None of the divs have the position attribute set.

For example,

will appear As shown in the picture, what is the compatibility issue? Forgot to advise. Thank you everyone ~

Reply to the discussion (solution)

No, if there is such a thing, post all your test HTML and CSS code

Post the CSS code.

If you set it like this

The red one will cover the blue one.

Asking for code

No code, no truth

Is the height and width limited? Try making the width and height larger.

Problem with the width of the two boxes

z-index

Ahhhhhh I don’t know

No code, no truth

Try Try clear:both;

It may be that your red layer has float set, but the blue layer does not have float

According to the way your code is written, it will not be overwritten, just click it

There is such a weird thing. Write some code

Cuihua - code

Sorry, I am not online recently! Thank you all for your enthusiastic help. Now I am posting the code, please help me take a look.
In ie7, Google Chrome browser, the red border of Safari covers the upper layer. Please help me find out the reason.

<!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>

Copy after login

*--------------------------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;}

Copy after login

top is set too small, After changing it to 100, it displays normally

Quote from 15th Floor’s reply:
*--------------------------top style --------------------------------------------------*/

#top{ margin:0;padding:0; width:100%; height:25px; background:url(../images/topbg.jpg) repeat-x;}
……
Yeah , thank you~ It was my mistake