HTML5/CSS3 模态框在 IE 上的兼容性问题

Question

我第一次尝试使用HTML5/CSS3，其中在我的一个页面上使用了一个漂亮的链接来展示对话框(modal)。这在Chrome/Firefox中非常顺畅，但在IE中却不行（可能并不意外）。在IE（9）中，当我尝试点击链接时，整个页面实际上会完全冻结。是否有人可以指出CSS的哪个部分不兼容，并且是否有可用的修复方法？下面是代码，请事先感谢。 HTML

 <td><a href="#Code1">Get Date / Without Time</a></td>


 <div id="Code1" class="modalDialog">

 <div>

<a href="#close" title="Close" class="close">X</a>
<h2>TITLE</h2>
<p>TEXT</p>
        </div>
        </div>

CSS

.modalDialog {
        position: fixed;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 40%;
        height: auto;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #FFFFFF;
        background: -moz-linear-gradient(#FFFFFF, #999999);
        background: -webkit-linear-gradient(#FFFFFF, #999999);
        background: -o-linear-gradient(#FFFFFF, #999999);
    }

    .close {
        background: #285C82;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { color: #285C82; background: #FFFFFF; }

- William

Answer 1

在所有你写了-webkit-, -moz-或-o-的标签中，你没有写-ms-，这是Internet Explorer的前缀。 过渡在Internet Explorer中根本不起作用，你可以在w3schools中查看Internet Explorer的支持情况。

- Boaz K

Answer 2

IE9 不支持 CSS pointer-events。在所有浏览器中，对话框都会在整个页面上隐形（不透明）渲染，但在IE9中，指针事件不会被忽略，因此对话框会阻止单击锚点的事件。

可能有更清晰的解决方法，但作为一种解决方法，您可以使用条件注释在单独的样式表中添加以下属性以供IE使用。

.modalDialog {
    display:none;
}

.modalDialog:target {
    display:block;
}

另一个解决方法是给<a>元素设置位置和z-index，使其大于对话框的z-index。

此外，CSS transition在IE9中不被支持，因此您可能需要寻找替代方案，也许IE < 9 CSS3 Transition Effect Cheats?可以帮助。

- andyb

---

需要这些东西一段时间，IE10也不支持pointer-events！ - andyb