CSS: outline-offset alternative for IE?

问题:

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/

回答1:

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!

回答2:

Some more solutions. I've used them successfully:

1.

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

Restriction of this solution: "outline" property ignores "border-radius" one.

2.

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

Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.

回答3:

My issues with other solutions toward this end:

"outline-offset" is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.

Here is the fix I used to responsively frame images in an IE compatible way:

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

"outline" defines the outer border, "border" defines the space in between, while the inner border is actually the background color with padding determining its width.

回答4:

In cases where you're styling the ::focus pseudo-class, you won't have the luxury of using ::after or ::before pseudo-class as those methods are only effective on container elements (see W3C spec. for more information).

A cross-browser solution to give-off that offsetting effect is to use box-sizing, border, and padding.

You simply negate and alternate the padding and border width values.

Default / base styles:

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

Pseudo-class styles:

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