Html 博德斯赢了'；无法在Internet Explorer中显示

我不知道为什么，但边界不会显示在IE 8-9中，我没有时间检查10及以上。css

：hover

效果也不起作用，模式弹出窗口也不起作用。我不知道是否有适合IE的工作

它在FF和chrome中完美工作

HTML:

模态CSS：

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    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: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;
    background: #F4F4F4;    
}

.close {

    background: #FF2E28;
    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;
}

.close:hover {
    background: #600;
}

.modalDialog + image {
    border:solid 1px black;
}

---

哈哈，看着这一大堆抓我的头。答案很简单

您正在使用两个冒号而不是一个冒号：

ul:：在

应该是

ul:before

尽管仍然存在一些样式错误，所以您需要修复这些错误。但至少现在边界出现了，对吗P

根据，Internet Explorer<9不支持CSS3

：：before

伪。如果您想支持8，就必须使用CSS2

：before

伪代码。这将解决边界问题

悬停问题可能与声明权限有关，如注释中所述

模态的问题在于，在IE中，它实际上位于其他元素的前面，只是不可见。您必须设置

display:none

，然后在实际显示时放置它：

.modalDialog {
    display: none;
}

.modalDialog:target {
    display: block;
}

原因是

指针事件

css属性（至少不在11之前）。 遗憾的是，在IE8中仅使用css完成模式弹出窗口将很困难，因为

：target

伪

---

对这个答案中的每一个编辑都进行修改：。

Borders and hover work on IE>=9，因为JSFIDLE无法使用，所以还没有尝试过8。嗯，FIDLE在ie9中可以使用，但是本地副本并不感谢@CarlMarkham知道它在新版本中可以使用。我只是希望有一种方法可以解决老的问题“注意：在IE中，必须声明一个：hover选择器才能在除以下元素之外的其他元素上工作：这可能解释了小提琴和本地副本之间的差异？好吧，转换在IE<10上不起作用。我已经更新了我的代码和小提琴，以包括模型弹出问题。如果你点击顶部的“主席”，你会看到它是如何工作的（但不是在ie 9Ah nice中，这会隐藏ie中的弹出窗口，但当我单击链接时，它仍然不会弹出。这只是旧版ie中不起作用的一种情况吗？@Adsy the fiddle在IE9中对我起作用：。是否有任何特定的ie版本对你不起作用？我的ie是8，你认为最好放弃8并升级吗？@Adsy我刚刚发现了问题。）

：target

伪选择器在IE8中不受支持：。因此，在支持IE8的同时，恐怕不可能为其提供完整的CSS解决方案。顺便说一下，正确的方法是使用两个冒号：CSS3是2个冒号，CSS2是一个冒号

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    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: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;
    background: #F4F4F4;    
}

.close {

    background: #FF2E28;
    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;
}

.close:hover {
    background: #600;
}

.modalDialog + image {
    border:solid 1px black;
}

.modalDialog {
    display: none;
}

.modalDialog:target {
    display: block;
}