3

よろしくお願いします！私は2日間問題を解決しようとしていますが、成功しませんでした:(

私の問題はCSSメニューに関するものです。CSSファイルの「navli：hover ul」セクションで「position：absolute」を指定すると、IE9にドロップダウンメニューが表示されません。しかし、Chrome、Firefox、Safariで動作しています...「position：relative」に変更すると、メニューはドロップダウンしますが、メニューのすべての幅が同時になります...したがって、160pxのサブメニューを使用する代わりにワイド、700px幅です...

私はそれがNivoSliderから来ることができるかどうかも調べようとしましたが、解決策は見つかりませんでした...

これが私のHTMLコードです。

        <!DOCTYPE html>
    <html id="html">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--<script type="text/javascript" src="Javascript.js">
        </script>-->
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <title>McDonough & Co. Solicitors</title>
    </head>
    <body id="wrapper">
        <header>
            <section>
                <div id="logos">
                    <img alt="Logo" src="McDonough%20logo%20copy.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img alt="Accredited by the Law Institute of Victoria"
                    src="file:///C:/Users/Paul/Desktop/Charlotte/McDonough%20Solicitors%20Website/LIV_Accreditation.png">
                <div id="address">
                    <br>68 Seymour Street,<br>Traralgon, 3844<br> Victoria
                    <br><br>&#9742; (03) 5176 1000<br>
                    <a href="mailto:law@mcdonough.com.au" target="_blank">&#9993; law@mcdonough.com.au</a><br>
                </div>
                </div>
                <div style="clear:both;"></div>             
            </section>
            <nav id="gradients">
                <ul>
                    <li><a href="file:///C:/Users/Paul/Desktop/Charlotte/McDonough%20Solicitors%20Website/Home.html">Home</a></li>
                    <li><a href="aboutus.html">About us</a></li>
                    <li><a href="services.html">Services</a>
                        <ul id="gradients2">
                            <li><a href="willsestates.html">&nbsp;Wills & Estate</a></li><br>
                            <li><a href="property.html">&nbsp;Property</a></li><br>
                            <li><a href="business.html">&nbsp;Business</a></li><br>
                            <li><a href="civillitigation.html">&nbsp;Civil Litigation</a></li><br>
                        </ul>
                    </li>
                    <li><a href="usefullinks.html">Useful Links</a>
                        <ul id="gradients3">
                            <li><a href="countycourt.html">&nbsp;County Court</a></li><br>
                            <li><a href="vicmagistratescourt.html">&nbsp;Victorian Magistrates</a></li><br>
                            <li><a href="supremecourt.html">&nbsp;Supreme Court</a></li><br>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav><br>
        </header>
        <article id="bloc_page">
            <p><section class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/image05.jpg" alt="">
                    <img src="images/image04.jpg" alt=""/>
                    <img src="images/image06.jpg" alt=""/>
                </div>
                <script type="text/javascript">
                    $(window).load(function() {
                    $('#slider').nivoSlider();
                    });
                </script>
                <div id="baseline">
                    "Your accredited Specialist in Business Law & Property Law since 1980"<br><br><br>
                </div>
                <div id="left">
                    "Lorem ipsum dolor sit amet, erat nominati efficiendi pri cu. Mea ut simul fabulas, mea id quot admodum. No nec interesset repudiandae, in vim dolore regione, 
                    nec possit alterum forensibus ut. Qui in magna summo scripserit, cu mel agam nullam suscipiantur. Cu admodum ponderum gubergren nec, euismod consequuntur his in.
                    Id nam diam mazim persius, quem scripserit vim ad, mei cu nulla vitae. Est ex principes posidonium, libris mediocrem pro an, has sonet diceret ex. Nec cu summo constituto. 
                </div>
                <div id="right">
                    Nibh forensibus est eu, eum et hinc commodo, id justo maiestatis usu. Velit mollis assueverit pro cu.
                    Ea mea facete scripserit repudiandae. Et ubique ocurreret dissentias sea, ferri noster malorum eu vel. Aliquip admodum liberavisse sea ne, sed in nulla solet nominati. 
                    Mei an clita vivendo assueverit, omnis lorem omittam vel at. Ut bonorum scripserit vis, cum erat erroribus omittantur te, ut tacimates honestatis sea.
                </div>
            <div style="clear:both;"></div>
            </section>
        </p></article>
    <br><br>
        <footer id="footer">
            <p>
            <a href="index.html">Home |</a>
            <a href="forum.html">About us |</a>
            <a href="contact.html">Services |</a>
            <a href="contact.html">Useful Links |</a>
            <a href="contact.html">Contact</a>
            <br><br>
            © McDonough & Co. Solicitors 2012 - All rights reserved.<br><br>
            </p>
        </footer>
    </body>
    </html>

そして私のCSSコード：

        /* style.css
    ---------
    By Charlotte Routier */

    /* Structure générale */
    #html
    {
    width:740px;
    margin:auto;
    background:#e6f0fa;
    }

    /* Header */
    #logo, header h1
    {
    display: inline-block;
    margin-bottom: 20px;
    }

    /* Menu de navigation */
    nav
    {
    font-family: 'RawengulkBold';
    font-size: .9em;
    float: left;
    width: 700px;
    position:absolute;
    z-index:1200;
    -webkit-box-shadow: 0 1px 15px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 15px 0 #4a4a4a;
    box-shadow: 0 1px 15px 0 #4a4a4a;
    }
    nav ul
    {
    padding: 0; /* pas de marge intérieure */
    list-style-type:none;
    text-align:center;
    left: 100%; 
    z-index:1300;
    }
    nav li
    {
    float: left;
    width:100px;
    margin-right: 40px;
    list-style-type:none;
    display:inline-block;
    }
    nav ul li a
    {
    display:inline-block;  
    width:140px;
    line-height:40px; /*hauteur de l'image de fond*/
    text-decoration:none;
    }
    nav li:hover ul, nav li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
    {
    left:auto; /* Repositionnement normal */
    font-size: .8em;
    list-style-type:none;
    position:absolute;
    z-index:900;
    display:block;
    }
    nav li ul /* Sous-listes */
    {
    z-index:100;
    position:absolute;
    float:left;
    text-align:left;
    width: 180px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
    text-decoration: none;
    min-height: 0;
    }
    nav a
    {
    font-size: 1.3em;
    color: #000;
    text-decoration: none;
    }
    nav a:hover
    {
    text-decoration: none;
    color: #A2C9EC;
        background: #444;
        background: -webkit-linear-gradient( #555, #2C2C2C);
        background:    -moz-linear-gradient( #555, #2C2C2C);
        background:     -ms-linear-gradient( #555, #2C2C2C);
        background:      -o-linear-gradient( #555, #2C2C2C);
        background:         linear-gradient( #555, #2C2C2C);
    }
    nav a:active
    {
    text-decoration: none;
    color: #a2c9ec;
        background: #444;
        background: -webkit-linear-gradient( #555, #2C2C2C);
        background:    -moz-linear-gradient( #555, #2C2C2C);
        background:     -ms-linear-gradient( #555, #2C2C2C);
        background:      -o-linear-gradient( #555, #2C2C2C);
        background:         linear-gradient( #555, #2C2C2C);
        box-shadow: 1px 1px 10px black inset, 
                    0 1px 0 rgba( 255, 255, 255, 0.4);
    }
    #gradients {
    background-image: -webkit-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:    -moz-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:     -ms-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:      -o-linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    background-image:         linear-gradient(top, #A2C9EC 0%, #e7f2fb 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A2C9EC',endColorstr='#e7f2fb', GradientType=1);
    }
    #gradients2 {
    background-image: -webkit-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:    -moz-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:     -ms-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:      -o-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:         linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7f2fb',endColorstr='#A2C9EC', GradientType=0);
    }
    #gradients3 {
    background-image: -webkit-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:    -moz-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:     -ms-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:      -o-linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    background-image:         linear-gradient(top, #e7f2fb 0%, #A2C9EC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7f2fb',endColorstr='#A2C9EC', GradientType=0);
    }

    /* Slideshow */
    .nivoSlider {
    background:url(/nivo-slider/themes/bar/loading.gif) no-repeat 50% 50%;
    width: 700px !important;
    height: 230px !important;
    z-index:1;
    float:center;
    position:absolute;
    display:inline-block; 
    }
    .theme-default .nivoSlider img {
    width: 700px !important;
    height: 230px !important;
    z-index:1;
    }

    /* Corps du texte */
    body
    {
    background-color: #ffffff; /* Le fond de la page sera blanc */
    color: #000; /* Le texte de la page sera noir */
    padding-left: 40px;
    padding-right: 40px;
    -webkit-box-shadow: 0 1px 15px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 15px 0 #4a4a4a;
    box-shadow: 0 1px 15px 0 #4a4a4a;
    }
    #wrapper 
    {
    width:700px;
    margin:0 auto;
    }
    @font-face {
    font-family: 'Rawengulk';
    src: url('RawengulkDemibold-webfont.eot');
    src: url('RawengulkDemibold-webfont.otf') format('truetype'),
         url('RawengulkDemibold-webfont.woff') format('woff'),
         url('RawengulkDemibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('RawengulkDemibold-webfont.svg#QuadrantaBold') format('svg');
    }
    @font-face {
    font-family: 'RawengulkBold';
    src: url('RawengulkBold-webfont.eot');
    src: url('RawengulkBold-webfont.otf') format('truetype'),
         url('RawengulkBold-webfont.woff') format('woff'),
         url('RawengulkBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('RawengulkBold-webfont.svg#QuadrantaBold') format('svg');
    }
    #address
    {
    font-family: 'RawengulkBold';
    color: #000;
    font-size: 1em;
    display: inline-block;
    text-align: right;
    margin-left:20px;
    vertical-align:middle;
    line-height: 18px;
    }
    #baseline
    {
    font-family: 'RawengulkBold';
    color: #000;
    font-size: 1.2em;
    text-align: center;
    }
    #left
    {
    font-family: 'Calibri';
    color: #323232;
    font-size: .8em;
    text-align: justify;
    width: 320px;
    float:left;
    margin-left:2px;
    }
    #right
    {
    font-family: 'Calibri';
    color: #323232;
    font-size: .8em;
    text-align: justify;
    width: 320px;
    float:right;
    margin-right:2px;
    }
    img
    {
    vertical-align:middle;
    }
    p
    {
    color: #000;
    font-size: .7em; 
    font-family: 'Rawengulk';
    width:100%; /* On a indiqué une largeur (obligatoire) */
    float: right;
    text-decoration: none;
    }
    a /* Liens par défaut (non survolés) */
    {
    text-decoration: none;
    color: #000;
    }
    a:hover /* Apparence au survol des liens */
    {
    text-decoration: underline;
    color: #000;
    }
    a:active 
    {
    background-color: none;
    }
    #footer
    {
    font-size: 1.1em;
    float: center;
    text-align: center;
    }

詳細が必要な場合は、遠慮なくお問い合わせください。

うまくいけば、あなたは私を助けることができます！よろしくお願いします。シャーロット

PS：ここに2つの画像があります（1つはChromeで機能するドロップダウンメニューを示し、もう1つはIEで機能しないものを示しています）

4

1 に答える 1

0

絶対配置要素の親を確認したので、相対配置されていることを確認しましたか? 絶対配置要素は、その親コン​​テナーを基準にして配置されます。一部のブラウザーは、他の宣言が指定されていない場合、親が相対的に配置されていると想定します。他のブラウザはあなたのコードを文字通りに受け取り、それほど親切ではありません。また、Firefox (または同様のツール) で Firebug を使用して、要素がページのどこかに「表示」され、位置の問題が発生していることを確認できますか? そうでない場合は、表示するメニューを要求していないホバー ターゲットのレンダリングである可能性があります。パディング、表示:ブロック; IE での幅/高さの宣言は、この種の問題の一般的な原因です。

于 2012-08-24T11:06:31.333 に答える