CSS：outline-offset替代IE？ [英] CSS: outline-offset alternative for IE?

问题描述

我使用以下代码为不同颜色的两个边框和边框之间的空间。我使用属性 outline-offset 用于边框之间的空格。但是它不支持在IE（甚至IE9）。
有没有任何替代解决方案，在IE中工作，而不添加另一个div在html。

I'm using the following code for the 2 borders of different colors, and space between the borders. I'm using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9). Is there any alternate solution which works in the IE as well, without adding another div in the html.

HTML： / p>

HTML:

<div class="box"></div>

CSS：

.box{
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
    outline:2px solid red;
    outline-offset: 2px;    
}

高度和宽度不固定，我刚刚用于示例。

The height and width is not fixed, i have just used for the example.

JSFiddle：
http：// jsfiddle .net / xyXKa /

推荐答案

这里有两个解决方案。第一种是IE8 +兼容，使用 pseudoelements 。在此处查看JSFiddle 。

Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.

HTML：

<div class="box"></div>

CSS：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

第二个想法是一个非语义解，但是给你IE6 +的支持。在此处查看JSFiddle 。

HTML：

<div class="outer-box"><div class="inner-box"></div></div>

CSS：

​ CSS:

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

哦，我刚看到你要求离开单个 div 。嗯，第一个解决方案符合这些要求！

​ Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!

这篇关于CSS：outline-offset替代IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！