CSS3 does::after 继承IE9 中origin 元素的高度和边距？

Question

我有这个 HTML:

<div class="demo">hello world</div>

和这个 CSS:

 .demo { width: 100px; 
         height: 50px; margin-bottom: 50px; 
         background-color: red; position: relative;
         z-index:-1;
         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40ffffff,EndColorStr=#12ffffff);zoom: 1;}
 .demo::after { 
         width: 95px; 
         height: 95px; 
         position: absolute; left: 0; top: 0; border: 5px solid blue; content:""; 
         background-color: yellow; opacity: .75;}

我希望伪元素完全覆盖原始元素(它包含 IE7,8 的 50% 渐变 - 因此 height: 50%, margin-bottom: 50%;)

但是在 IE9 中...::after 元素只覆盖了 50%，尽管我专门将高度设置为 44px。这是因为使用了过滤器吗？知道如何覆盖它吗？

这是一个JSBin的例子。

感谢您的帮助。

更新

这是整个事情的一个例子:

Example

注意事项:

• 查看 background.css 文件中的注释
• 除了 .ui-icon，我无法更改元素结构或将渐变分配给任何其他元素
• 渐变应覆盖页脚的 50%。页脚为 44px，所以渐变停止在 22px
• IE7+8 无法做到这一点(或颜色停止)，所以我将 .ui-icon 高度设置为 22px 加上滤镜渐变
• 在为位于 .ui-icon 之上的所有其他浏览器添加渐变之前使用::before

问题 1 = IE9+ 呈现::before - 我使用 z-index:-1，所以 .ui-icon 位于::before 后面 = OK

问题 2 = 在 IE9+ 上，::before 背景被 .ui-icon 截断。

问题:如何避免::before中的渐变被截断？

Answer 1

Is this because of the use of filter? Any idea how to override it?

是的，这是因为过滤器。使用 filter 会导致 overflow:hidden 式的效果。

您可能知道 :after 是在元素内部呈现的，如下所示:

<div class="demo">hello world<div:after></div:after></div>

如果加上overflow: hidden，那么所有的浏览器都一样坏:http://jsbin.com/otilux/3

---

那么，如何解决呢？一种选择是使用 ::before 来处理绘制具有 filter 的内容。

参见: http://jsbin.com/otilux/4

这看起来和以前在 Chrome/Firefox 中一样，现在在 IE9 中看起来也一样。

由于使用 ::after 而不是 :after，我可以看出您并未尝试支持 IE8。因此，另一种选择是使用 SVG gradient instead of filter .