html - 弹出窗口在 IE 中无法正常工作

Question

我正在处理一个弹出窗口，它在包括 IE 在内的所有浏览器上都能正常工作，但在 IE9 上它显示了“overlay”div 的空间。 div 正在浏览器上占用空间。

弹出窗口的 CSS 代码是:

 .popup

    {  
        width:500px;
        height:300px;
        border:1px solid white;
        background-color:white;
        top:20%;
        position:relative;
        margin: 0 auto;
        background: rgb(247, 247, 247);
        border: 1px solid rgba(147, 184, 189,0.8);
        -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
           -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
                box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
        -webkit-box-shadow: 10px;
        -moz-border-radius: 10px;
             border-radius: 10px;
             opacity:1;
            
    }
    #overlay
    {
        position:absolute;
        top:0px;
        visibility:hidden;
        background-color:black;
        opacity:1;
        left:0px;
        height:100%;
        width:100%;
        text-align:center;
    }
    #overlay:target
    {
        visibility:visible;
        -webkit-animation: fade 400ms ease;
    }
    #overlay:target > .popup
    {
        
         -webkit-animation: moveFromBottom 400ms ease;
    }
    @-webkit-keyframes fade
    {
        from {
           
           
            
            opacity: 0;
        }
        to {
            
            
            opacity: 1;        
        }
    }
    
    
    @-webkit-keyframes moveFromBottom
    {
        from {
           
           
            -webkit-transform: scale(.5);
            opacity: 0;
        }
        to {
            
            -webkit-transform: scale(1);
            opacity: 1;        
        }
    }
    
    
    @-moz-keyframes fade
    {
        from {
           
           
            
            opacity: 0;
        }
        to {
            
            
            opacity: 1;        
        }
    }
    
    
    @-moz-keyframes moveFromBottom
    {
        from {
           
           
            -webkit-transform: scale(.5);
            opacity: 0;
        }
        to {
            
            -webkit-transform: scale(1);
            opacity: 1;        
        }
    }
    
    
    @-ms-keyframes fade
    {
        from {
           
           
            
            opacity: 0;
        }
        to {
            
            
            opacity: 1;        
        }
    }
    
    
    @-ms-keyframes moveFromBottom
    {
        from {
           
           
            -webkit-transform: scale(.5);
            opacity: 0;
        }
        to {
            
            -webkit-transform: scale(1);
            opacity: 1;        
        }
    }
    
    
    @-o-keyframes fade
    {
        from {
           
           
            
            opacity: 0;
        }
        to {
            
            
            opacity: 1;        
        }
    }
    
    
    @-o-keyframes moveFromBottom
    {
        from {
           
           
            -webkit-transform: scale(.5);
            opacity: 0;
        }
        to {
            
            -webkit-transform: scale(1);
            opacity: 1;        
        }
    }
    
     @keyframes fade
    {
        from {
           
           
            
            opacity: 0;
        }
        to {
            
            
            opacity: 1;        
        }
    }
    
    
    @keyframes moveFromBottom
    {
        from {
           
           
            -webkit-transform: scale(.5);
            opacity: 0;
        }
        to {
            
            -webkit-transform: scale(1);
            opacity: 1;        
        }
    }

我的 HTML 代码是:

  <a href="#overlay">Login</a> 
  <div id="overlay">
  <div class="popup">
                    ---                   
  </div> 
  </div>

Answer 1

您是否尝试过 text-decoration: none 删除该行？