margin-top在Internet Explorer中工作，但在谷歌瀏覽器中不工作

margin-top正在IE中工作，但在Google Chrome中無法正常工作。在我的設計中，兩個菜單分別顯示每個菜單。margin-top在Internet Explorer中工作，但在谷歌瀏覽器中不工作

問題出在這一行margin-top:30%; in .anothermenu ul。

在設計中，如果我在Chrome中工作，則第二個菜單顯示在第一個菜單上方，第二個菜單顯示在頁面頂部（菜單111,222,333）。但是在Internet Explorer 11中未顯示此問題

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>

來源

2017-04-12 ahmed salah

您需要提供實際的有效HTML輸出。對於大多數不使用.NET的人來說，這種@Scripts的東西是沒用的。 – Rob

好吧，我會這樣做，但爲什麼我的代碼上面的工作在IE 11和不工作在谷歌鉻 –

任何時候有人說「它在IE瀏覽器」，但不是其他瀏覽器，它會立即告訴我的代碼是錯誤的。 IE最好不過了，但是如果沒有可行的例子，我無法測試你的代碼。 – Rob

清除您在Chrome瀏覽器的緩存，我有同樣的問題一次。如果Chrome瀏覽器判斷它不會更改，Chrome不會每次都重新載入您的文件。

首先，在刷新頁面時，使用CTRL + F5而不是F5（CTRL + F5強制所有文件重新加載）。但有時它不起作用。

第二，清除緩存（設置 - >高級設置 - >清除緩存）。

按照這個link並閱讀接受的答案，這個傢伙解釋如何「強制」重新加載你的css文件。

祝你好運！

來源

2017-04-12 13:42:52

'CTRL + R'它完全等於'F5' 。要強制重新加載（在所有瀏覽器上，包括IE和Firefox），您需要按下「CTRL + F5」。 –

你應該試試這個。它可以是Chrome的緩存問題，Ctrl + F5的東西是否工作&。在開發工具中禁用chrome緩存！它應該工作或在您的瀏覽器工具欄選擇歷史記錄，然後選擇清除瀏覽數據。在「清除瀏覽數據」下，

CLICK清除瀏覽數據。

來源

2017-04-12 13:45:30 Bukhari

margin-top在Internet Explorer中工作，但在谷歌瀏覽器中不工作

回答

相關問題