Bogue IE: élément positionné de manière absolue avec une couleur d'arrière-plan non transparente

Question

J'ai un DIV en position absolue dont j'ai besoin pour piéger les événements onclick. Il s'avère que, dans IE7, la DIV semble n'avoir aucune «empreinte» pour des choses comme le clic et même le curseur. Par exemple:

div { 
     width: 200px; height: 200px; 
     position: absolute; 
     border: 10px solid black; 
     cursor: pointer; 
} 

Dans IE7, que DIV n'a pas « l'empreinte »: il ne réagit pas à onclick(), et son curseur ne change pas au pointeur. Curieusement, il gère à la fois ceux de sa frontière - d'où la grande frontière dans cet exemple. La définition d'une couleur de fond:

div { background-color: #fff; } 

résout le problème. Mais, dans ce cas, ce n'est pas possible - j'ai besoin de la DIV pour avoir un arrière-plan transparent.

Je suis tombé sur ce bug dans le passé, mais je ne peux pas pour la vie de me rappeler le hack IE pour le réparer.

Answer 1

Essayez d'utiliser une image d'arrière-plan transparente.

Je suggère d'utiliser un 2x2 ou plus grand .gif qui est tous les pixels transparents. Réglez-le pour répéter sur x et y et IE ne devrait pas avoir un problème avec les clics.

background: transparent url(path/to/spacer.gif) repeat left top; 
/* Not all of that is necessary, but I have a tendency to define it anyway. */ 

Answer 2

Avait le même problème et n'a pas trouvé une meilleure solution que le gif transparent. Notez que ce problème s'est également produit dans IE8 pour moi. Vous n'avez pas besoin d'utiliser un gif 2x2 px, 1x1 px suffit.