CSS：轮廓偏移替代IE？

我对不同颜色的2个边框和边框之间的空白使用了以下代码。我使用outline-offset作为边界之间的空间。但它不支持IE（甚至不支持IE9）。是否有任何替代解决方案在IE中工作，而无需在html中添加另一个div。CSS：轮廓偏移替代IE？

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/

来源

2012-10-28 user1355300

这里有两种解决方案。首先是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; 
}

哦woops，我刚才看到您请求只留下一个div。那么，这第一个解决方案符合这些要求！

来源

2012-10-29 02:52:32 jmeas

这里是如何获得高达8个边界：http://nicolasgallagher.com/multiple -backgrounds-and-borders-with-css2/demo/borders.html – Patrick

第一个是我最喜欢的！ :) – myTerminal

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

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

这种解决方案的限制：“纲要”属性忽略“边界半径”之一。

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

该解决方案的限制：红色和绿色边框之间的空间不能是透明的，因为红色的box-shadow将通过它看到。所以，需要任何纯色，我已经设置了#fff。

来源

2013-05-20 14:08:47 Inquisitor

我朝向这个目的的其他解决方案的问题：

“纲要偏移”不兼容IE浏览器;伪元素方法需要绝对定位和像素比例（对我的响应式设计不利）;插入框阴影不显示在图像上。

这里是我以前在一个IE兼容的方式来响应帧图像的修正：

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

“轮廓”定义的外边界，“边界”限定空间在之间，而内边界实际上是带填充的背景颜色决定其宽度。

来源

2013-09-07 14:48:57

在你的造型::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; 
}

来源

2017-08-18 12:21:05

CSS：轮廓偏移替代IE？

回答

相关问题