css - IE9：使用过滤器时出现链接问题

Question

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

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

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

Answer 1

filter为 IE8 工作“更好”。但对于 IE9，我会推荐 SVG 渐变。

在这里你可以找到微软官方的SVG 渐变背景制作工具

你会得到这样的东西：

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

然后，使用条件注释，您可以再次定位 IE8：

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

无论如何，我建议你在谷歌上搜索“Visual CSS tool”以获得完整的跨浏览器代码。

Answer 2

您只使用-moz-linear-gradient它，它仅适用于旧版本的 Firefox Mozilla。

对于 IE9，您还可以使用CSS3：linear-gradient: { ... }

对于旧版本的 Chrome 和 Safari，您应该使用-webkit-linear-gradientOpera-o-linear-gradient和-ms-IE（但并非一切都可以正常工作）。

Answer 3

一种解决方案是将您包装a在另一个中div并在其上应用您的背景属性，而不是在a;

<div class = "container"><a href="/">Glee is awesome!</a></div>

CSS：

.container {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
    border: 1px solid #000;
    padding: 3px 5px;
    margin: 5px;
}
a {
    display: block;  
}

这是一个小演示：little link。