css - :after pseudoelement is cropped when using filter in IE8

Question

这是 HTML:

<div id="target"></div>

CSS:

#target {
    position: relative;
    width: 200px;
    height: 200px;
    background: #F00;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F00,endColorstr=#F00)";
}
#target:before {
    content: "content from before";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
}

这是 jsfiddle:
http://jsfiddle.net/8BzW6/

如果您对过滤器进行注释，则“after”元素不会被父元素 (#target) 裁剪。

你知道如何解决这个问题吗？

(我需要渐变，但不想使用图像)

Answer 1

对我来说使用微软的过滤器是一种不好的做法，它总是会导致问题。如果你将它与 CSS3 等现代技术结合起来，情况会变得更糟。

使用 data64 来使用内联 1px 渐变图像怎么样？

这是一个生成器:http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/