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删除该行？

Answer 2

也许这很简单，但您需要在标记text-decoration: none

上添加样式

所以在你的情况下：

 a {
        text-decoration: none
   }

虽然这是一个坏主意，但定位所有链接。

我个人只想在sepesific链接中添加一个类并定位：

<强>标记

<a href="#overlay" class="plainlink">Login</a>

<强> CSS

.plainlink {
        text-decoration: none
   }

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

2 个答案: