Question

My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.

I have test my code in jsfiddle

May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.

Answer 1

filter works “better” for IE8.
But for IE9 i would raccomend SVG gradients.

Here you can find Microsoft’s official SVG gradient background maker

You’ll obtain something like this:

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);

And you can add it to your rule this way:

a {
    padding: 3px 5px;
    margin:5px;
    display:block;
    border:1px solid #000;
    background:#FAFAFA; /* fallback for browsers not supporting gradients */
    background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
    background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}

Then, with conditional comments you can target IE8 again:

.ie8 a {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}

Anyway, i suggest you to google for “Visual CSS tool” for a complete cross-browser code.