CSS3做：：在继承IE9中原始元素的高度和边距之后？

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%的梯度，因此高度: 50%，边缘-底部:50%)；

然而在IE9..。虽然我特别将高度设置为44 to，但after元素只覆盖了50%。这是因为使用过滤器吗？知道怎么覆盖它吗？

下面是示例的JSBin。

谢谢你帮忙。

更新

以下是整个过程的一个例子：

示例

备注：

• 参见background.css文件中的注释
• 除了..ui图标之外，我不能更改元素结构或为任何其他元素分配渐变。
• 渐变应覆盖50%的页脚。页脚是44 at，所以梯度停止在22 at。
• IE7+8不能这样做(或停止颜色)，所以我使..ui图标高度22 do加上滤镜梯度。
• 使用：：在添加所有其他浏览器在..ui图标顶部的渐变之前

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

问题2=在IE9+上，在背景被..ui图标切断之前：：。

问:在被切断之前，如何避免：：中的渐变？

Answer 1

这是因为使用过滤器吗？知道怎么覆盖它吗？

是的，这是因为filter。使用filter会导致overflow:hidden-esque效应。

您可能知道: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。因此，另一种选择是使用filter。