0

したがって、CSSに次の行があります。

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

ご想像のとおり、これは Chrome で正しくレンダリングされます。IEに同様のオプションがあるかどうか疑問に思っています。Webkitプレフィックスを削除しようとしましたが、それではうまくいきません。

http://html5please.com/を確認すると、box-reflect の使用を避けるように指示されていますが、その機能が最後に更新されたのは 1 年以上前です。

http://www.xhtml-lab.com/css/create-reflection-effect-using-css3をチェックすると、box-reflect の代替案が示されますが、エレガントとは思えず、著者は記事の最後で述べていますこのソリューションは IE では機能せず、彼女自身がより良いソリューションを探しているとのことです。その方は2歳以上です。

http://caniuse.comを確認すると、box-reflect が IE でまったくサポートされていないことが示唆されます。しかし、私は日付を見つけることができないので、この議論のために時代遅れのふりをします:-p.

4

1 に答える 1

0

現在のところ、IE 用のボックス リフレクト プロパティはありませんが、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

于 2013-07-06T04:36:40.320 に答える