ドロップダウンメニューの問題 (CSS 互換性) について教えてください。！！ _html/css

ドロップダウンメニューの問題 (CSS 互換性) について教えてください。！！ _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:44:19

オリジナル

914 人が閲覧しました

CSS HTML

ドロップダウンメニューを作成しましたが、IE7 と互換性がありません。上の写真
しかし、Firefox で実行すると、上の写真

Firefox の効果が欲しいのですが、誰が代わりに変更してくれるでしょうか。

<!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>    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;            list-style-type: none;            text-decoration: none;            font:bold 15px 黑体;            background-color:Black;            color:#B8860B;        }                #body-head        {            width: 100%;            height: 120px; border:1px solid red;        }        .logo        {            width: 200px;            height: 70px;            text-align: center;            line-height: 60px;            margin: 0px auto;            border:1px solid red;        }        .navBox        {            margin-top: 10px;            text-align: center;            height: 35px;            line-height: 35px; border:1px solid red;        }        .navBox ul        {            width: 980px;            margin: auto;            overflow: hidden;        }        .navBox ul li        {            border:1px solid red;            display: inline;            height:35px;            padding: 10px 20px;                  }        .navBox ul li a        {            text-decoration: none;        }        .menu        {            display: none;            position: absolute;            width: 980px;            background-color: White;            height: 120px;                    }        #body-main        {            width: 100%;            height: 600px;        }        .img-list        {            text-align: center;            margin: 0 auto;        }        #body-bottom        {            width: 100%;            height: 100px;        }    </style>    <script src="../Contents/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            var currentColor = $(".navBox ul li").css("background");            $(".navBox ul li").mouseover(function () { $(this).children("div").show(); $(this).css("background", "White"); });            $(".navBox ul li").mouseout(function () { $(this).children("div").hide(); $(this).css("background", "Black"); });        });    </script></head><body>    <div id="container">        <div id="body-head">            <div class="logo">                nihao            </div>            <div class="navBox">                <ul>                    <li><a href="#">首页</a></li>                    <li><a href="#">关于品牌</a>                        <div class="menu">                            <span><a href="#">品牌介绍</a></span> <span><a href="#">目标愿景</a></span> <span><a href="#">                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li><a href="#">最新动态</a>                        <div class="menu">                            <span><a href="#">公司新闻</a></span> <span><a href="#">行业动态</a></span>                        </div>                    </li>                    <li><a href="#">彩宝欣赏</a>                        <div class="menu">                            <span><a href="#">宝石</a></span> <span><a href="#">钻石</a></span>                        </div>                    </li>                    <li><a href="#">珠宝首饰</a>                        <div class="menu">                            <span><a href="#">戒指</a></span> <span><a href="#">挂件</a></span> <span><a href="#">项链</a></span>                            <span><a href="#">手链/手镯</a></span> <span><a href="#">耳坠</a></span>                        </div>                    </li>                    <li><a href="#">珠宝课堂</a>                        <div class="menu">                            <span><a href="#">img</a></span>                        </div>                    </li>                    <li><a href="#">品牌合作</a>                        <div class="menu">                            <span><a href="#">产品供应</a></span> <span><a href="#">品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div id="body-main">            <div class="img-list">               <!-- <img src="../Contents/Images/home_azuma.jpg" title="" alt="" />-->            </div>        </div>        <div id="body-bottom">        </div>    </div></body></html>

ログイン後にコピー

ディスカッションへの返信 (解決策)

IE は変人です

シンプルであるべきです

.navBox に、position:relative; を追加するだけです
このような文を

次に、
left: を .menu 0px に追加します; p TOP: 45px;

の上部には問題が発生する可能性があります。

を追加します。
次に追加します

left:0px;
top:16px;
in .menu それだけです

IE7 と互換性のないドロップダウンメニューを作成しました。上の写真
しかし、Firefox で実行すると、上の写真

Firefox の効果が欲しいのですが、誰が代わりに変更してくれるでしょうか。

<!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>    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;            list-style-type: none;            text-decoration: none;            font:bold 15px 黑体;            background-color:Black;            color:#B8860B;        }                #body-head        {            width: 100%;            height: 120px; border:1px solid red;        }        .logo        {            width: 200px;            height: 70px;            text-align: center;            line-height: 60px;            margin: 0px auto;            border:1px solid red;        }        .navBox        {            margin-top: 10px;            text-align: center;            height: 35px;            line-height: 35px; border:1px solid red;        }        .navBox ul        {            width: 980px;            margin: auto;            overflow: hidden;        }        .navBox ul li        {            border:1px solid red;            display: inline;            height:35px;            padding: 10px 20px;                  }        .navBox ul li a        {            text-decoration: none;        }        .menu        {            display: none;            position: absolute;            width: 980px;            background-color: White;            height: 120px;                    }        #body-main        {            width: 100%;            height: 600px;        }        .img-list        {            text-align: center;            margin: 0 auto;        }        #body-bottom        {            width: 100%;            height: 100px;        }    </style>    <script src="../Contents/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            var currentColor = $(".navBox ul li").css("background");            $(".navBox ul li").mouseover(function () { $(this).children("div").show(); $(this).css("background", "White"); });            $(".navBox ul li").mouseout(function () { $(this).children("div").hide(); $(this).css("background", "Black"); });        });    </script></head><body>    <div id="container">        <div id="body-head">            <div class="logo">                nihao            </div>            <div class="navBox">                <ul>                    <li><a href="#">首页</a></li>                    <li><a href="#">关于品牌</a>                        <div class="menu">                            <span><a href="#">品牌介绍</a></span> <span><a href="#">目标愿景</a></span> <span><a href="#">                                管理层（董事长、产品总监、品牌总监)</a></span>                        </div>                    </li>                    <li><a href="#">最新动态</a>                        <div class="menu">                            <span><a href="#">公司新闻</a></span> <span><a href="#">行业动态</a></span>                        </div>                    </li>                    <li><a href="#">彩宝欣赏</a>                        <div class="menu">                            <span><a href="#">宝石</a></span> <span><a href="#">钻石</a></span>                        </div>                    </li>                    <li><a href="#">珠宝首饰</a>                        <div class="menu">                            <span><a href="#">戒指</a></span> <span><a href="#">挂件</a></span> <span><a href="#">项链</a></span>                            <span><a href="#">手链/手镯</a></span> <span><a href="#">耳坠</a></span>                        </div>                    </li>                    <li><a href="#">珠宝课堂</a>                        <div class="menu">                            <span><a href="#">img</a></span>                        </div>                    </li>                    <li><a href="#">品牌合作</a>                        <div class="menu">                            <span><a href="#">产品供应</a></span> <span><a href="#">品牌加盟</a></span>                        </div>                    </li>                </ul>            </div>        </div>        <div id="body-main">            <div class="img-list">               <!-- <img src="../Contents/Images/home_azuma.jpg" title="" alt="" />-->            </div>        </div>        <div id="body-bottom">        </div>    </div></body></html>

ログイン後にコピー

重要なことは、.navBox ul の overflow: hidden; を忘れずに削除することです。これは絶対です。機能しません...