Comment empêcher le filtre dégradé de propriété d'Internet Explorer de couper le contenu qui devrait déborder?

Question

J'utilise le filtre dégradé Internet Explorer dans mon CSS.

Tout allait bien jusqu'à ce que je remarqué que les images qui sont censées étendre au-delà de leurs conteneurs overflow:visible; OBTIENNENT clipsées comme si le conteneur a été mis à overflow:hidden;

Je ne sais pas pourquoi cela se passerait-il, ou comment répare le. Quelqu'un peut-il aider?

Je regarde dans IE8 et IE7

Ceci est l'origine du problème css, quand je la mettre en commentaire, pas plus bug:

.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 */ 
} 

Answer 1

Cela fonctionne, bien que ce soit un balisage supplémentaire.

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

My content 

</div> 

Il y a un bonus à cette tactique, comme vous pouvez ajouter plusieurs boîtes à gradient et définir leurs hauteurs/largeurs en% du parent, émulant ainsi le comportement « d'arrêt de couleur » autorisés dans Safari/MOZ.

Par exemple:

<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> 

Answer 2

Je sais que cela ne répond pas votre question en particulier, mais considérez votre public. Sont-ils tous des utilisateurs d'Internet Explorer, ou représentent-ils des proportions naturelles d'internautes? S'ils ne sont pas tous des utilisateurs d'IE (peut-être dans un réseau d'entreprise/éducation), pensez à n'utiliser que des méthodes conformes aux normes et à permettre à l'application/site de se dégrader correctement.

Maintenant, pour votre question. La raison pour laquelle cela ne fonctionne pas comme prévu est que la case ne s'étend pas jusqu'à la fin du contenu, même si le débordement est visible. Le contenu «marche» simplement hors de la boîte, mais cela ne rend pas la boîte plus grande. Vous ne pouvez pas étendre la zone pour qu'elle s'adapte au contenu, sauf pour qui ne définit pas les propriétés de largeur et/ou de hauteur. En fait, IE avait un bug dans lequel au lieu de déborder, la boîte s'est étendue (c'était un bug).

Je peux vous recommander un conseil cependant; utiliser min- <largeur/hauteur> et max- <largeur/hauteur> au lieu de largeur et/ou hauteur. Ils vous permettent une taille de boîte flexible, avec des limites guidées.

Answer 3

Cela peut aider ceux qui choisissent d'abandonner le soutien pour IE7.

IE7 aura toujours un problème si l'élément est positionné (relatif/absolu/fixe). Dans IE8 +, le problème disparaît si z-index est défini sur auto.

Si vous avez besoin de supporter IE7, ou si vous avez besoin d'empiler des choses en utilisant z-index, vous devez vous contenter d'un second wrapping DIV.

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

Édition 2012-05-29: J'ai créé un exemple pour montrer comment résoudre ce problème. J'ai créé l'exemple pour résoudre un problème d'empilement de z-index ... et il s'est juste arrangé pour résoudre ce problème aussi (http://jsfiddle.net/ryanwheale/gz8v3/).

Answer 4

Je mis la position de div parent à parent et cela a fonctionné :) (ou absolu, fonctionne très bien aussi)