我有类似“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;
}
最佳答案
这是 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/
希望这会有所帮助!
关于html - IE 上的轮廓偏移替代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25624934/