CSS:IE 的轮廓偏移替代方案? [英] CSS: outline-offset alternative for IE?

问题描述

我对 2 个不同颜色的边框以及边框之间的空间使用以下代码.我使用属性 outline-offset 作为边框之间的空间.但是它在 IE 中不受支持(甚至不支持 IE9).是否有任何替代解决方案也适用于 IE，而无需在 html 中添加另一个 div.

HTML:

CSS:

.box{宽度:100px；高度:100px；边距:100px；边框:2px纯绿色；轮廓:2px纯红色；轮廓偏移:2px；}

高度和宽度不是固定的，我只是举个例子.

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

解决方案

这里有两个解决方案.第一个是 IE8+ 兼容的，使用 pseudoelements.在JSFiddle here上查看.

HTML:

CSS:

.box {位置:相对；宽度:100px；高度:100px；边距:100px；边框:2px纯绿色；}.box:在{之后内容: "";位置:绝对；顶部:-6px；左:-6px；显示:块；宽度:108px；高度:108px；边框:2px纯红色；}

我的第二个想法是非语义解决方案，但为您提供 IE6+ 支持.在JSFiddle here上查看.

HTML:

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

CSS:

.outer-box {宽度:104px；高度:104px；边距:100px；边框:2px纯红色；填充:2px；}.内盒 {宽度:100px；高度:100px；边框:2px纯绿色；}

哦，糟糕，我刚刚看到你要求只留下一个 div.嗯，第一个解决方案符合这些要求！

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:

<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/

解决方案

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;
}

​ The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on 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;
}

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

这篇关于CSS:IE 的轮廓偏移替代方案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！