: 在 IE8 中使用过滤器时，伪元素被裁剪后答案

【问题标题】：:after pseudoelement is cropped when using filter in IE8: 在 IE8 中使用过滤器时，伪元素被裁剪后
【发布时间】：2012-01-16 13:01:08
【问题描述】：

这是 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) 裁剪。

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

（我需要渐变，但我不想使用图像）

【问题讨论】：

标签： css internet-explorer-8 filter pseudo-element

【解决方案1】：

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

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

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

【讨论】：