13

どうやら Internet Explorer (少なくともバージョン 8 まで) は、フィルターを適用するときに(たとえば、不透明度のために) overflow:visibleを無視し、オーバーフロー:hiddenが使用されたかのように、フィルター処理された要素の外側にあるものをクリップします。

この動作の回避策はありますか?

以下のサンプル コードは、子がコンテナーによってどのようにクリップされるかを示しています。その右と下の境界線のみが表示されます。

 <style type="text/css">
  #container {
   position:absolute;
   left:100px;
   top:100px;
   width:100px;
   height:100px;
   border:1px solid black;
   filter:alpha(opacity=50);
   overflow:visible;
  }

  #child {
   position:relative;
   left:-10px;
   top:-10px;
   width:20px;
   height:20px;
   border:1px solid red;
  }
 </style>

 <div id="container">
  <div id="child"></div>
 </div>
4

2 に答える 2

9

これに対する回避策は簡単なようです: filterではなく-ms-filterを使用してください:

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
于 2010-09-01T14:57:52.227 に答える
2

まず、興味深い点が1つあります。IE8をエミュレートする場合でも、IE9はoverflow：visibleを正しく尊重しているようです。

次に、この問題の一般的な回避策の1つは、＃containerと#childの兄弟を共通の親の内部に配置することです。共通の親にはフィルターがなく（オーバーフローが正しく機能することを意味します）、必要なフィルターを#containerに適用します。

ただし、＃childは実際にはコンテナの子ではなくなったため、フィルタを受け取りません。これは問題になる場合と問題にならない場合があります。考えられる解決策の1つは、同じフィルターを#childにも適用することです。これは「可能な解決策」だと思います。2つの要素にフィルターを個別に適用してから構成することは、最初に要素を構成してからその構成にフィルターを適用することと同じである場合とそうでない場合があるためです。これは、フィルターが何であるか、および要素がオーバーラップするかどうかによって異なります。同一ではない場合でも、「十分に近い」可能性があります。

最後に、ページに標準モードにするdoctypeがある場合（doctypeがない場合にIEがデフォルトで使用するquirksモードではなく）、子にposition：static（位置が指定されていない場合のデフォルト）。子にposition：absoluteまたはposition：relativeのいずれかを指定すると、親のフィルターが子に適用されなくなります。一般的に、これは悪いことですが、副作用として、overflow：visibleが正しく機能するようになります。

このソリューションを採用すると、子要素にもフィルターを適用する必要があるのと同じ問題が発生します。

于 2011-06-08T21:20:19.607 に答える