Home >Web Front-end >HTML Tutorial >div layer display problem_html/css_WEB-ITnose
div layer display problem_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:10:271136browse
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,
e432303f4355d839219fdb88e69e9b5e16b28748ea4df4d9c2150843fecfba68
4ed2fb838094eee16b5230c2500c81ac16b28748ea4df4d9c2150843fecfba68
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
4ed2fb838094eee16b5230c2500c81ac16b28748ea4df4d9c2150843fecfba68
e432303f4355d839219fdb88e69e9b5e16b28748ea4df4d9c2150843fecfba68
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> *--------------------------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 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