為什么我的網站菜單僅在Internet Explorer中移動？

Question

我編寫了一個頂部固定菜單的網站，但是在Internet Explorer 11中，當我單擊菜單中的按鈕時，它會移動約半秒鍾或類似的時間。 在其他瀏覽器中，它可以正常工作。 我可以更改些什么來消除該錯誤，我認為這與我的CSS代碼有關。

這是指向我的網站的鏈接，使用IE進行查看，然后單擊頂部的按鈕以查看問題所在：） http://www.ivan.ilic.hg-gf.de/index.html

如果有人可以幫助我，那將是非常好的。 我希望按鈕在IE和Mozilla，Chrome中都相同。 我認為IE總是與其他瀏覽器有所不同。

這是我的“導航”菜單的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;  
       }
  }

這是重要的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>      

Answer 1

您看到的“閃光燈”是默認的active背景色。 單擊時，它會閃爍灰色，從而使外觀看起來很運動。 您需要重置CSS樣式以覆蓋IE中的默認背景色。 或者，您可以簡單地更改活動樣式本身。

例：

:active { background:transparent; }

樣式重置將覆蓋瀏覽器添加的所有不同默認樣式，從而防止大多數跨瀏覽器樣式差異。 我使用F12開發人員工具對此進行了測試，並且消除了閃存。

編輯：

在IE中，使用document.write()添加樣式表的速度正在減慢。 本質上，內容要先繪制，然后在加載樣式后“修復”。 鏈接沒有JS的樣式表，閃光燈將消失。