Question

我有类似的东西＆＃34; http://jsfiddle.net/sogpgepg/＆＃34;适用于Chrome和Firefox。但是我注意到偏移量在Internet Explorer上不起作用，并且轮廓在图片之外而不在其中。

经过一些研究后我发现资源管理器不支持outline-offset！

有什么方法可以在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

一种可能的解决方法是使用插入阴影。

我在某种程度上改变了你的小提琴。

http://jsfiddle.net/sogpgepg/1/

我所做的改变是：

在<img>。

background-image

.inner

将所有样式从.inner img移至.inner

通过将模糊半径设置为0并指定展开半径，您可以获得一个硬边缘＆＃39;。

此链接包含有关使用阴影（尤其是嵌入阴影）的更多信息：http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/

代码：

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

.inner{
    width: 300px;
    height:200px;
    background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
    box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
    -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:hover {
    box-shadow: inset 0px 0px 0px 6px 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 2

以下是IE的替代方案，如＆＃34; http://css-tricks.com/＆＃34;

所示

代码：

<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/

希望这会有所帮助！

IE上的大纲偏移替代

2 个答案: