css - IE9 : issue in a link when use filter

Question

我的问题:我有一个与显示 block 的链接。在 IE9 上一切顺利。但是当我添加一个过滤器以获得渐变时，光标只在边框和文本上有手，而没有在框的其余部分。

我已经在 jsfiddle 中测试了我的代码

我可能做错了什么吗？ 我的代码适用于所有浏览器和版本。为了清楚起见，我只是删除了其他浏览器的代码。

Answer 1

filter 对 IE8 “更好”。 但是对于 IE9，我会 raccomend SVG 渐变。

在这里可以找到微软官方SVG gradient background maker

你会得到这样的东西:

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

您可以通过这种方式将其添加到您的规则中:

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

然后，使用 conditional comments您可以再次针对 IE8:

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

无论如何，我建议您在 google 上搜索“Visual CSS 工具”以获得完整的跨浏览器代码。