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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:44 AM

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; を忘れずに削除することです。これは絶対です。機能しません...

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7333

Java チュートリアル

1627

CakePHP チュートリアル

1351

Laravel チュートリアル

1263

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、