html - IE 上的轮廓偏移替代

Question

我有类似“http://jsfiddle.net/sogpgepg/”的东西，可以在 Chrome 和 Firefox 上运行。但是我注意到偏移量在 Internet Explorer 上不起作用，轮廓在图片之外而不是图片内部。

经过一些研究，我发现 Explorer 不支持轮廓偏移!

有什么方法可以在 Internet Explorer 上获得相同的效果(边框内)？

脚本:

HTML

<div id="container">
<div class="inner">
    <img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
    </div>
</div>

CSS

#container{
    width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
}

    .inner img{
            width: 100%;

            outline: 6px solid RGBa(255,0,0, 0.5);
            outline-offset: -6px;

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

        .inner img:hover {
            outline: 6px solid rgba(200,200,200,0);

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

Answer 1

这是 IE 的替代品，如“http://css-tricks.com/”所示

代码:

<div class="inner-border">
    Transparent Inside Border
</div>

CSS

.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

JSFiddle Demo of the Above Code

这是透明内边框的另一个例子:<强> http://jsfiddle.net/chriscoyier/DvaqK/4/

希望这会有所帮助!