ホームページ > 記事 > ウェブフロントエンド > div レイヤーの表示の問題_html/css_WEB-ITnose
div レイヤーの表示の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:10:271103ブラウズ
IE7 や Safari などの一部のブラウザでは、下の div が上の div を覆ってしまいます。その理由は何ですか?
どの div にも位置属性が設定されていません。
たとえば
e432303f4355d839219fdb88e69e9b5e16b28748ea4df4d9c2150843fecfba68
4ed2fb838094eee16b5230c2500c81ac16b28748ea4df4d9c2150843fecfba68
互換性の問題は何ですか?毛織物？アドバイスするのを忘れていました。皆さんありがとうございます~
ディスカッション（解決策）に返信
いいえ、このような場合は、テスト用の HTML と CSS コードをすべて投稿してください
CSS コードを投稿してください。
このように設定すると
4ed2fb838094eee16b5230c2500c81ac16b28748ea4df4d9c2150843fecfba68
e432303f4355d839219fdb88e69e9b5e16b28748ea4df4d9c2150843fecfba68
赤いものが青いものを覆います。
コードを要求しています
コードがなければ真実もありません
高さと幅は制限されていますか?幅と高さを大きくしてみてください。
2 つのボックスの幅の問題
z-index
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
レイヤーにはフロートがありません、そうですか？
コードの書き方によると、上書きされないので、クリックしてください
Cuihua--コードをアップロードしてください
ごめんなさい、私です。最近オンラインじゃないよ！皆様の熱心なご協力に感謝いたします。コードを投稿しましたので、見てみてください。
Google Chrome ブラウザー ie7 で、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> *-------------------------------------トップスタイル----- ----------------------------*/
#top{ マージン:0;パディング:0; 幅:100%; 25px;background:url(../images/topbg.jpg)repeat-x;}
#top{ margin:0;padding:0; width:100%; height:110px; background:url(../images/topbg.jpg) repeat-x;} 上の設定を 100 に変更すると正常に表示されます
15 階の返信からの引用:
*- - - - - - - - - - - - - - -トップスタイル - - - - - - - - - - - ---- ------------------*/
#top{ マージン:0; パディング:0; 幅:100%; 高さ:25px; ../images /topbg.jpg)repeat-x;}
はい、ありがとう〜私の間違いでした