CSS：box-reflect（或替代）是否与IE10兼容？ [英] CSS: Is box-reflect (or an alternative) compatible with IE10?

问题描述

所以我在CSS中有以下行：

So I have the following line in my CSS:

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(white));

在Chrome中正确显示，正如您所期望的。我想知道是否有类似的选项为IE。我试图删除webkit前缀，但这不会做的伎俩。

This renders correctly in Chrome, as you would expect. I am wondering if there is a similar option for IE. I tried just dropping the webkit prefix, but that doesn't do the trick.

检查 http://html5please.com/ 说

检查 http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 box-reflect的一个替代品，但似乎并不优雅，作者说在文章的结尾，该解决方案不能与IE一起工作，她自己正在寻找一个更好的解决方案。一个已超过两年。

Checking http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 shows an alternative to box-reflect, but doesn't seem as elegant, and the author says at the end of the article that the solution doesn't work with IE, and that she herself is looking for a better solution. That one is over two years old.

检查 http://caniuse.com 建议box-reflect在IE不支持 - 这不会给我充满希望。但是我找不到一个日期，因此为了这个讨论，它会假装它过时了.-

Checking http://caniuse.com suggests box-reflect is not supported on IE at all - which does not fill me with hope. But I can't find a date, and will therefore pretend it's out of date for sake of this discussion :-p.

推荐答案

到目前为止没有框反射属性为IE
但我已经做了一个解决方法，使其工作在IE

As of now there is no box reflect property for IE But I have done a workaround to make it work in IE

<style type="text/css">
    #imgmask
    {
     -webkit-transform: scaleY(-1); 
     -moz-transform: scaleY(-1); 
     -ms-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: flipv; 
     opacity:0.20; 
     filter: alpha(opacity='20');
   }
</style>

<div id="Div1">
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" />
</div>   
<div id="imgmask">
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" />
</div>

感谢
AB

Thanks AB

这篇关于CSS：box-reflect（或替代）是否与IE10兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！