CSS：IEのアウトラインオフセット代替？

Question

私は次のコードを色の異なる2つの罫線と罫線間のスペースに使用しています。私は境界線の間のスペースにプロパティoutline-offsetを使用しています。しかし、IEではサポートされていません（IE9でさえも）。 htmlに別のdivを追加することなく、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/

Answer 1

は2つのソリューションです。最初は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ああ、私はちょうどあなたが1つだけdivを残して要求されたことがわかりました。さて、その最初の解決策は、これらの要件に適合します！

Answer 2

いくつかのソリューションがあります。私は正常にそれらを使用しました：このソリューションの

1.

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

制約事項：「アウトライン」プロパティは「ボーダー半径」1を無視します。この溶液の

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

制限：赤ボックス影がそれを通して見えるようになるので、赤と緑の境界線との間の空間は透明であることができません。だから、単色が必要ですが、私は#fffを設定しました。この端部に向かって、他のソリューションと

Answer 3

私の問題：

「アウトライン・オフセットは、」IEと互換性がありません。擬似要素法は、絶対配置とピクセル比率を必要とします（私の応答性のあるデザインにはうってつけです）。インセットボックスシャドウは画像上に表示されません。ここ

私は応答IE互換性のある方法で画像をフレームに使用される修正である：内側境界が実際にある間

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

「概要」は外側の境界を画定する、「境界」は、間に空間を画定しますパッディングの背景色はその幅を決定します。

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