19

CSS で Internet Explorer グラデーション フィルターを使用しています。

コンテナーoverflow:visible;がoverflow:hidden;

なぜこれが起こるのか、またはそれを修正する方法はわかりません。誰でも助けることができますか？

私はIE8とIE7でそれを見ています

これは問題の原因となっている css です。コメントアウトすると、バグはなくなります。

.box{
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */
}
4

4 に答える 4

11

これは、IE7 のサポートを中止することを選択しているユーザーに役立つ可能性があります。

要素が配置されている場合（相対/絶対/固定）、IE7には常に問題があります。IE8+ では、z-indexがautoに設定されている場合、問題はなくなります。

IE7 をサポートする必要がある場合、または z-index を使用してスタックする必要がある場合は、2 番目のラッピング DIV で解決する必要があります。

<div class="position_me_and_stack_me_with_z-index">
  <div class="give_me_a_filter">
    Content goes here
  <div>
</div>

編集 2012-05-29: この問題を修正する方法を示す例を作成しました。z-index スタッキングの問題を解決するために例を作成しました...そして、たまたまこの問題も修正されました( http://jsfiddle.net/ryanwheale/gz8v3/ )。

于 2012-01-27T20:38:09.220 に答える
10

これは機能しますが、追加のマークアップです。

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

複数のグラデーション ボックスを追加し、それらの高さ/幅を親の % として設定できるため、この戦術にはボーナスがあります。これにより、safari/moz で許可されている「カラー ストップ」動作をエミュレートできます。

例えば：

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>
于 2010-06-12T10:46:49.543 に答える
1

これが特にあなたの質問に答えるものではないことはわかっていますが、あなたの聴衆を考慮してください. 彼らはすべて Internet Explorer ユーザーなのか、それともインターネット ユーザーの自然な比率を表しているのか? 彼ら全員が単なる IE ユーザーではない場合 (おそらく企業/教育ネットワーク内)、標準に準拠した方法のみを使用し、アプリケーション/サイトが IE などのサポートしていないブラウザーに正常に低下することを検討してください。

さて、あなたの質問です。期待どおりに動作しない理由は、オーバーフローが表示されている場合でも、ボックスがコンテンツの最後まで拡張されないためです。コンテンツは単にボックスの外を「歩く」だけですが、これによってボックスが大きくなることはありません。幅や高さのプロパティを fixed に設定しないことを除いて、コンテンツに合わせてボックスを拡張する方法はありません。実際、IE には、ボックスがオーバーフローするのではなく拡張するというバグがありました (これはバグでした)。

ただし、1 つのヒントをお勧めします。widthおよび/またはheightの代わりにmin-<width/height>およびmax-<width/height>を使用します。ガイド付きの境界を使用して、ボックスのサイズを柔軟に調整できます。

于 2010-05-03T08:33:50.213 に答える
0

親divの位置を相対に設定すると、機能しました:)（または絶対、正常に機能します）

于 2012-04-19T12:05:03.420 に答える