为什么我的网站菜单只在Internet Explorer中移动？

I programmed a website with a fixed menu on the top, but in the Internet Explorer 11 it moves around for half a second or something like that when I click a button in the menu. In other browsers it works fine. What can I change to remove the bug, I think it has to do with my CSS code.

我在顶部编写了一个带有固定菜单的网站,但在Internet Explorer 11中,当我单击菜单中的按钮时,它会移动半秒或类似的东西。在其他浏览器中它工作正常。我可以更改什么来删除错误,我认为它与我的CSS代码有关。

Here is a link to my website, take a look at it with IE and click the buttons on the top for seeing what the problem is :) http://www.ivan.ilic.hg-gf.de/index.html

这是我网站的链接,用IE浏览一下,点击顶部的按钮查看问题是什么:) http://www.ivan.ilic.hg-gf.de/index.html

It would be very nice if someone could help me. I want the buttons to be the same in IE and Mozilla, Chrome. I think that the IE is always a bit different to the other browsers.

如果有人可以帮助我,那将是非常好的。我希望IE和Mozilla,Chrome中的按钮相同。我认为IE总是与其他浏览器有点不同。

Here is my CSS code for the Navigation menu:

这是我的导航菜单的CSS代码:

    /* CSS Menu Navigation Bar */

    #cssmenu

    {   
       position: relative;  
       margin: 0 auto;
       clear: both; 
    }

    #cssmenu a 
    {       
       list-style: none;
       margin: 0;
       padding: 0;
       border: 0;
       line-height: 1.5; 
    }

    #cssmenu li 
    {   
       border: 1px solid transparent;
       padding-top: 7px;
       display: block; 
       float: right; 
       margin: 0 10px;
    }

    #cssmenu ul
    {
        margin: 0 auto;
        padding: 0;
        text-align: center;
        padding-right: 20px;
        margin-bottom: -70px;
        max-height: 80px;
    }

    #cssmenu li a 
    {  
        padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 10px;   
        width: 70px;

        border: 1px solid #dfdfdf;
        text-decoration: none;  
        display: block;

        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;      

        font-size: 17px;
        font-family: Verdana, Tahoma;
        color: #292F33;
   }

   #cssmenu li:hover a 
   {  
        border-bottom: 3px solid #30B0FF;   
        display: block;
        color: #30B0FF;
        clear: both;

        font-size: 17px;
        font-family: Verdana, Tahoma;

        transition-duration: 0.05s;
        transition-delay: 0.03s;
   }

  /* screen smaller than 1325px */

  @media only screen and (max-width : 1325px),
  only screen and (max-device-width : 1325px)
  {
       #menu
       {
          min-width: 1020px;
       }

       #cssmenu li a 
       {        
          padding-top: 10px;
          padding-right: 0px;
          padding-left: 0px;
          padding-bottom: 10px; 

          width: 60px;      
          font-size: 15px;
          border: 1px solid transparent;

       }

       #cssmenu li:hover a 
       {        
          font-size: 15px;  
       }
  }

And here is the important HTML code:

这是重要的HTML代码:

<!-- Menu -->       

    <div id="menu">     

        <li style="list-style: none;"> <img id="image" src="images/head.png"/><br><i>&nbsp;{by Ivan Ilic}</i></li>

        <div id='cssmenu'>      

            <ul>                                        

                <li><a href='lazarus.html'>Lazarus</a></li> 
                <li><a href='scratch.html'>Scratch</a></li>
                <li><a href='html.html'>HTML</a></li>
                <li><a href='c-sharp.html'>C#</a></li>
                <li><a href='c++.html'>C++</a></li>
                <li><a href='index.html'>Home</a></li>                  

            </ul>       

        </div>

    </div>

1 个解决方案

#1

The "flash" you're seeing is the default active background color. When you click, it flashes gray, which gives the appearance of movement. You need to have a CSS Style Reset to override the default background color in IE. Alternatively, you can simply change the active style itself.

您看到的“闪光”是默认的活动背景颜色。单击时,它会闪烁灰色,从而呈现运动外观。您需要使用CSS样式重置来覆盖IE中的默认背景颜色。或者,您只需更改活动样式本身即可。

Example:

:active { background:transparent; }

The style reset will prevent most cross-browser styling differences by overriding all the different default styles that browsers tack on. I tested this with F12 Developer Tools and it eliminated the flash.

样式重置将通过覆盖浏览器所应用的所有不同默认样式来防止大多数跨浏览器样式差异。我使用F12开发人员工具测试了它,它消除了闪存。

Edit:

The use of document.write() to add the style sheet is slowing down in IE. Essentially the content is being painted, and then "fixed" once the styles are loaded. Link the style sheet without JS and the flash will disappear.

在IE中使用document.write()添加样式表的速度正在减慢。基本上是内容被绘制,然后加载样式后“固定”。链接没有JS的样式表,闪存将消失。

#1