インターネットエクスプローラのマージントップで動作していますが、Google Chromeで動作していません

Question

margin-topはGoogle Chromeで動作していますがIEでは動作しています。私のデザインでは、2つのメニューがそれぞれ上下に表示されます。

margin-top:30%;の.anothermenu ulに問題があります。

私がChromeで作業している場合は、2番目のメニューが最初のメニューの上に表示され、2番目のメニューがページのトップに表示されます（メニュー111,222,333）。しかし、Internet Explorerの11でこの問題にChromeで

body { 
 
    margin: 0 
 
} 
 

 
.container ul { 
 
    border-top: 2px solid red; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    /* Set the navbar to fixed position */ 
 
    top: 0; 
 
    /* Position the navbar at the top of the page */ 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 4%; 
 
    padding: 1px; 
 
} 
 

 
.container li { 
 
    float: right; 
 
} 
 

 
.container li a { 
 
    color: white; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
.container li i { 
 
    color: white; 
 
} 
 

 
.w3ls_header_middle { 
 
    padding: 0 0; 
 
} 
 

 
.agileits_logo { 
 
    float: right; 
 
    margin-right: 0em; 
 
    margin-top: 2em; 
 
} 
 

 
.agileits_banner { 
 
    float: left; 
 
    margin-left: 1em; 
 
} 
 

 
.anothermenu ul { 
 
    position: absolute; 
 
    margin-top: 30%; 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 10%; 
 
    width: 100%; 
 
} 
 

 
.anothermenu li { 
 
    float: left; 
 
    width: 10%; 
 
} 
 

 
.anothermenu li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.anothermenu li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li><a href="#home">الرئيسيه</a></li> 
 
    <li><a href="#news">نبذه عن</a><i>|</i></li> 
 
    <li><a href="#contact">اتصل بنا</a><i>|</i></li> 
 
    <li><a href="#contact">اللغه</a><i>|</i></li> 
 
    <li><a href="#contact"> تسجيل دخول</a><i>|</i></li> 
 
    </ul> 
 
    <div class="w3ls_header_middle"> 
 
    <div class="container"> 
 
     <div class="agileits_logo"> 
 
     <img src="../../images/logo.png"> 
 
     </div> 
 
     <div class="agileits_logo"></div> 
 
    </div> 
 
    <div class="agileits_banner"> 
 
     <embed src="../../images/banner.swf" type="application/x-shockwave-flash" width="600" height="200" /> 
 
    </div> 
 
    <div class="clearfix"> </div> 
 
    </div> 
 
</div> 
 
<div class="anothermenu"> 
 
    <ul> 
 
    <li><a href="#home">111</a></li> 
 
    <li><a href="#news">222</a><i>|</i></li> 
 
    <li><a href="#contact">333</a><i>|</i></li> 
 
    <li><a href="#contact">444</a><i>|</i></li> 
 
    <li><a href="#contact">555</a><i>|</i></li> 
 
    </ul> 
 
</div> 
 

 

Answer 1

クリアキャッシュを表示しない、私は同じ問題が1時間を過ごしました。 変更されていないと判断されるたびに、Chromeはファイルを再読み込みしません。

まず、ページを更新するときにCtrl + F5キーを押します（CTRL + F5キーを押すとすべてのファイルが強制的に読み込まれます）。しかし、時にはうまくいきません。

次に、キャッシュをクリアします（設定 - >詳細設定 - >キャッシュクリア）。

このlinkに従って、受け入れられた回答を読んでください、この人はあなたのCSSファイルのリロードを "強制"する方法を説明します。

幸運を祈る！

Answer 2

あなたはthis.itを試してみてください。Chromeのキャッシュ問題がありますか？Ctrl + F5の作業は&でしたか？開発ツールでクロムキャッシングを無効にしてください！それが動作するはずです または ブラウザのツールバーに 履歴を選択してから、ブラウズデータを消去を選択します。 [閲覧中のデータを消去する]の下に

クリックして閲覧データを消去します。