Links leak through semi-transparent DIV overlays in IE8

I just noticed something with IE8. I have a photo that is a link, and there's an partially transparent div over the image (just the bottom third of it or so) that is using this CSS code:

background: rgba(0, 0, 0, 0.7); /* handles the proper browsers */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); /* for IE */

Unfortunately, when mousing over the div, the cursor i开发者_开发技巧s a pointer and clicking leads to the img's link. If I get rid of that filter and just make the background #000, it works fine and the overlay prevents any clicking. This behavior does not happen in Firefox or Chrome.

How can I work around this bug?

EDIT: Please note, this is not the same as an entire div with its opacity set to 0.7! That would cause the text inside of it (which I have) to also fade. This is strictly background color alpha.

Fiddle here: http://jsfiddle.net/csaltyj/dxTdq/

I have had the SAME problem. You have to use an opaque color in the style and apply transparency via jquery

OR

make a semi-transparent .png as the background of the div