CSS:IE的outline-offset替代方案？

Question

我使用以下代码为不同颜色的2个边框和边框之间的空格.我正在使用该属性outline-offset作为边界之间的空间.但是在IE中不支持它(甚至不是IE9).有没有任何替代解决方案在IE中工作,而不在HTML中添加另一个div.

HTML:

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

CSS:

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

高度和宽度不固定,我刚刚用于示例.

JSFiddle: http ://jsfiddle.net/xyXKa/

Answer 1

这是两个解决方案.首先是IE8 +兼容,利用pseudoelements.在JSFiddle上查看它.

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:

.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.那么,第一个解决方案符合这些要求!

Answer 2

一些更多的解决方案。我已经成功使用了它们：

1。

.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}

此解决方案的局限性：“轮廓”属性忽略“边界半径”之一。

2。

.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}

此解决方案的局限性：红色和绿色边框之间的空间不能透明，因为通过它可以看到红色的盒子阴影。因此，任何需要的纯色，我都设置为#fff。