html - CSS:IE 的轮廓偏移替代方案？

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 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 here 上查看.

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。嗯，第一个解决方案符合这些要求!