我有这个 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 中的渐变?