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>

您需要提供实际的有效HTML输出。对于大多数不使用.NET的人来说，这种@Scripts的东西是没用的。 – Rob

好吧，我会这样做，但为什么我的代码上面的工作在IE 11和不工作在谷歌铬 –

任何时候有人说“它在IE浏览器”，但不是其他浏览器，它会立即告诉我的代码是错误的。 IE最好不过了，但是如果没有可行的例子，我无法测试你的代码。 – Rob

答

清除您在Chrome浏览器的缓存，我有同样的问题一次。如果Chrome浏览器判断它不会更改，Chrome不会每次都重新载入您的文件。

首先，在刷新页面时，使用CTRL + F5而不是F5（CTRL + F5强制所有文件重新加载）。但有时它不起作用。

第二，清除缓存（设置 - >高级设置 - >清除缓存）。

按照这个link并阅读接受的答案，这个家伙解释如何“强制”重新加载你的css文件。

祝你好运！

'CTRL + R'它完全等于'F5' 。要强制重新加载（在所有浏览器上，包括IE和Firefox），您需要按下“CTRL + F5”。 –

答

你应该试试这个。它可以是Chrome的缓存问题，Ctrl + F5的东西是否工作&。在开发工具中禁用chrome缓存！它应该工作或在您的浏览器工具栏选择历史记录，然后选择清除浏览数据。在“清除浏览数据”下，

CLICK清除浏览数据。

margin-top在Internet Explorer中工作，但在谷歌浏览器中不工作

相关推荐