:在 IE8 中使用过滤器时，伪元素被裁剪后
这是 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）。
你知道如何解决这个问题吗？
（我需要渐变，但不想使用图像）
This is the 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;
}
here is the jsfiddle:
http://jsfiddle.net/8BzW6/
If you comment the filter then the "after" element is not cropped by the parent element (#target).
Do you know how to solve this?
(I need a gradient and I don't want to use an image)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对我来说使用微软的过滤器是一种不好的做法，它总是会引起问题。如果你将它与 CSS3 等现代技术结合起来，情况会变得更糟。
使用 data64 使用内联 1px 渐变图像怎么样？
这是一个生成器： http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Using Microsoft's filter for me is a bad practices, it will always cause issues. And if you combine it with modern technics like CSS3 its getting even worse.
What about using inline 1px gradient image using data64?
Here is a generator: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/