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？

回答

相關問題