0

我有这个 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;}

我希望伪元素完全覆盖原始元素（其中包含 50% 的 IE7,8 渐变 - 因此高度：50%，边距底部：50%；）

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

这是示例的JSBin。

感谢帮助。

更新

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

例子

笔记：

  • 查看 background.css 文件中的注释
  • 我无法更改元素结构或将渐变分配给 .ui-icon 以外的任何其他元素
  • 渐变应覆盖页脚的 50%。页脚为 44 像素，因此渐变在 22 像素处停止
  • IE7+8 无法做到这一点（或颜色停止），所以我将 .ui-icon 高度设置为 22px 加上 filter-gradient
  • 使用 ::before 我为 .ui-icon 顶部的所有其他浏览器添加渐变

问题 1 = IE9+ 渲染 ::before - 我使用 z-index:-1，所以 .ui-icon 位于 ::before = OK

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

问题：如何避免 ::before 中的渐变？

4

1 回答 1

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。因此，另一种选择是使用SVG 渐变而不是filter.

于 2011-08-23T08:52:26.453 回答