0

私はこのHTMLを持っています：

<div class="demo">hello world</div>

そしてこのCSS：

 .demo { width: 100px; 
         height: 50px; margin-bottom: 50px; 
         background-color: red; position: relative;
         z-index:-1;
         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40ffffff,EndColorStr=#12ffffff);zoom: 1;}
 .demo::after { 
         width: 95px; 
         height: 95px; 
         position: absolute; left: 0; top: 0; border: 5px solid blue; content:""; 
         background-color: yellow; opacity: .75;}

疑似要素が元の要素を完全にカバーするようにしたかった（IE7,8の50％のグラデーションが含まれているため、高さ：50％、マージン-下部：50％;）

ただし、IE9では... :: after要素は50％しかカバーしていませんが、特に高さを44pxに設定しました。これはフィルターを使用しているためですか？それをオーバーライドする方法はありますか？

これが例のJSBinです。

手伝ってくれてありがとう。

アップデート

全体の例を次に示します。

例

ノート：

  • background.cssファイルのコメントを参照してください
  • 要素の構造を変更したり、.ui-icon以外の要素にグラデーションを割り当てたりすることはできません
  • グラデーションはフッターの50％をカバーする必要があります。フッターは44pxなので、グラデーションは22pxで停止します
  • IE7 + 8はこれを行うことができない（または色が止まる）ので、.ui-iconの高さを22pxに加えてfilter-gradientを作成します
  • :: beforeを使用して、.ui-iconの上にある他のすべてのブラウザのグラデーションを追加します

問題1=IE9+は::beforeをレンダリングします-私はz-index：-1を使用しているので、.ui-iconは:: before=OKの後ろにあります

問題2=IE9 +では、::beforeの背景が.ui-iconによって切り取られます。

質問：切断される前に::の勾配を回避するにはどうすればよいですか？

4

1 に答える 1

1

これはフィルターを使用しているためですか？それをオーバーライドする方法はありますか？

はい、それはのせいですfilter。を使用するfilterと、overflow:hidden-esque効果が発生します。

:after次のように、要素内でレンダリングされることに気付くかもしれません。

<div class="demo">hello world<div:after></div:after></div>

追加するoverflow: hiddenと、すべてのブラウザが等しく壊れます：http: //jsbin.com/otilux/3

それで、それを修正する方法は？1つのオプションは、::beforeを持っているものの描画を処理するために使用することですfilter。

参照： http： //jsbin.com/otilux/4

これは、Chrome / Firefoxで以前と同じように見えますが、IE9でも同じように見えます。

::afterの代わりにを使用して:afterいるため、IE8をサポートしようとしていないことがわかります。したがって、別のオプションは、の代わりにSVGグラデーションを使用することですfilter。

于 2011-08-23T08:52:26.453 に答える