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

Answer 2

更多解决方案。我成功地使用了它们：

1

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

此解决方案的限制：“outline”属性忽略“border-radius”之一。

2

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

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

Answer 3

我为此采取其他解决方案的问题：

“outline-offset”与IE不兼容;伪元素方法需要绝对定位和像素比率（对我的响应式设计没有好处）;插入框阴影不会显示在图像上。

这是我用来以IE兼容的方式响应帧图像的修复：

.container img { 
        border:2px solid white;
        outline:4px solid red;
        background-color: green;
        padding: 2px;
}

“outline”定义外边框，“border”定义中间的空间，而内边框实际上是背景颜色，填充确定其宽度。

Answer 4

如果您正在为::focus伪类设置样式，那么您将无法使用::after或::before伪类，因为这些方法仅对容器元素 （有关详情，请参阅W3C spec.）。

提供抵消效果的跨浏览器解决方案是使用box-sizing，border和padding。

您只需取消并替换填充和边框宽度值。

默认/基本样式：

input[type="text"] {
  ...
  padding:10px;
  border:1px solid grey;
}

伪类风格：

input[type="text"]:focus {
  padding:8px;
  border:3px solid red;
}

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

4 个答案: