html - CSS中的大纲在IE中不起作用(最新版)

目前在我的网页设计的UI中工作。我注意到div中概述的内容不会在IEv11中显示吗？

在我的CSS中...

.samp-banner:focus, #samp-banner-id:focus,
#samp-close:focus, #samp-close-mobile:focus {
    outline: #c0dffb auto 1px;
}

.samp-banner {
    width: 100px;
    height: 100px;
    background-color: #d4edda;
    padding: 10px;
}

<div class="samp-banner" tabindex="0">sample</div>

更新：我尝试添加！important仍然无法正常工作。

最佳答案

您在CSS中使用outline-style: auto，这意味着浏览器将根据元素的上下文来决定要做什么。 Webkit与其他浏览器的呈现方式不同。如果您想让浏览器之间的行为更加相似，建议您使用下面的代码或outline-style: auto代替。

.samp-banner {
  width: 100px;
  height: 100px;
  background-color: #d4edda;
  padding: 10px;
}

.samp-banner:focus {
  outline: 1px solid #c0dffb;
  outline-offset: 2px;
}

<div class="samp-banner">sample</dov>