文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么伪元素上的滤波梯度在IE8中不起作用？

问为什么伪元素上的滤波梯度在IE8中不起作用？
EN

Stack Overflow用户
提问于 2012-05-01 20:29:15
回答 5查看 8.7K关注 0票数 35

我想创建这样的按钮：

​

在现代浏览器中，使用内置框、阴影和过滤器来创建效果。

对于IE8，选择伪元素。

对于IE7，我使用包装在条件注释中的特殊标记。

演示： (http://jsfiddle.net/8M5Tt/68/)

​

代码语言：javascript
复制
/**
 * Button w/o images
 */
html {
    font-size: 62.5%;
    }
body {
    font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
    }
 
/* layout */
.btn {
    display: inline-block;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    width: 170px;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
.btn {
    margin: 15px;
    }
.btn.btn_small {
    width: 130px;
    }

/* ie7 */
.lt-ie8 .btn .before,
.lt-ie8 .btn .after {
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.lt-ie8 .btn .before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.lt-ie8 .btn .after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie7 */

/* ie8 */
.ie8 .btn:before,
.ie8 .btn:after {
    content: ' ';
    z-index: 1;    
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.ie8 .btn:before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.ie8 .btn:after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie8 */

/* typo */
.btn {
    /* 28 / 14 = 2.57142857 */
    font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
    text-transform: uppercase;
    }
.btn:active {
    line-height: 2.4em;
    }

/* color */
.btn {
    background-color: #00cccc;
    color: #fff;
    border-color: #00a8a8;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
         1px  1px 4px rgba(255, 255, 255, 0.5) inset,            
        -1px -1px 4px rgba(000, 000, 000, 0.5) inset;
    }
.btn:hover {
    background-color: #00ebeb;
    }
.btn:active {
    box-shadow:
        -1px -1px 4px rgba(255, 255, 255, 0.5) inset,            
         1px  1px 4px rgba(000, 000, 000, 0.5) inset;
    }

/* green */
.btn_green {
    background-color: #009900;
    border-color: #009600;
    }
.btn_green:hover {
    background-color: #00c200;
    }

/* red */
.btn_red {
    background-color: #e00000;
    border-color: #c13d00;
    }
.btn_red:hover {
    background-color: #f00000;
    }
代码语言：javascript
复制
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
    <div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
    <div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
    <div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <div class="no-js no-ie" lang="en">
<!--<![endif]-->

<button class="btn btn_green btn_small ">
    Send
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn">
    Buy
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_green">
    Activate
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_red">
    Delete
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

</div>

​

的主要问题：为什么不对IE8中的伪元素进行筛选？

更新：

我想过滤器并不适用于css生成的内容，尽管这个MSDN页面上没有提到它。

我通过对条件元素应用过滤器来解决IE8中的问题，就像对IE7一样。

最终演示： (http://jsfiddle.net/matmuchrapna/8M5Tt/73/)

​

代码语言：javascript
复制
/**
 * Button w/o images
 */
html {
    font-size: 62.5%;
    }
body {
    font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
    }
 
/* layout */
.btn {
    display: inline-block;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    width: 170px;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
.btn {
    margin: 15px;
    }
.btn.btn_small {
    width: 130px;
    }

/* ie78 */
.lt-ie9 .btn .before,
.lt-ie9 .btn .after {
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.lt-ie9 .btn .before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.lt-ie9 .btn .after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie78 */

/* typo */
.btn {
    /* 28 / 14 = 2.57142857 */
    font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
    text-transform: uppercase;
    }
.btn:active {
    line-height: 2.4em;
    }

/* color */
.btn {
    background-color: #00cccc;
    color: #fff;
    border-color: #00a8a8;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
         1px  1px 4px rgba(255, 255, 255, 0.5) inset,            
        -1px -1px 4px rgba(000, 000, 000, 0.5) inset;
    }
.btn:hover {
    background-color: #00ebeb;
    }
.btn:active {
    box-shadow:
        -1px -1px 4px rgba(255, 255, 255, 0.5) inset,            
         1px  1px 4px rgba(000, 000, 000, 0.5) inset;
    }

/* green */
.btn_green {
    background-color: #009900;
    border-color: #009600;
    }
.btn_green:hover {
    background-color: #00c200;
    }

/* red */
.btn_red {
    background-color: #e00000;
    border-color: #c13d00;
    }
.btn_red:hover {
    background-color: #f00000;
    }
代码语言：javascript
复制
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
    <div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
    <div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
    <div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <div class="no-js no-ie" lang="en">
<!--<![endif]-->

<button class="btn btn_green btn_small ">
    Send
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn">
    Buy
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_green">
    Activate
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_red">
    Delete
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

</div>

​

更新2:

我解决了我的问题，但主要的问题仍然没有答案：

“为什么过滤器不工作在IE8中的伪元素？”？

开始了赏金。

更新3: i只为ie8上的过滤器(也是-ms-filter)创建了试验案例：

​

​

但是过滤器仍然不想使用伪元素。

更新4:我认为史考特回答最接近事实。

html
css
internet-explorer-8
pseudo-element
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-05-20 01:00:04

问题是“为什么过滤器不在IE8中的伪元素上工作？”以下是我所能得到的最明确的答案。它来自于此页上的信息。

gradient过滤器是一个“过程面”(与alphaimageloader一起)。程序面的定义如下：

过程曲面是在对象的内容和对象的背景之间显示的彩色表面。

仔细读一下。它本质上是另一个“层”，你可以说是在对象的内容和对象的背景之间。你看到问题的答案了吗？:before和:after创造的..。是!内容。专门作为MSDN注释

在伪元素之前和：：之后，指定文档树中元素之前和之后的内容位置。content属性与这些伪元素一起指定插入的内容。 生成的内容与其他框交互，就好像它们是插入在关联元素中的真实元素一样。

现在，如果它是生成的内容，那么它不是包含内容的“对象”，而是内容本身(碰巧有一些类似于可能包含内容的元素对象的行为)。

因此，不存在包含“内容”(因为它是内容)的“对象”，因此filter可以为伪元素(即"false元素“)生成的内容放置一个过程面。必须将gradient应用于对象，然后将过程面放置在对象和内容之间。

票数 41
EN

Stack Overflow用户

发布于 2012-05-19 22:50:32

关于-ms-filter -a同义词filter的文档-状态：

对象必须具有要呈现的筛选器的布局。

我的第一个猜测是，:before内容没有将hasLayout设置为true。虽然它可能没有设置为true，但也可能没有设置为false。首先，当我跟随hasLayout文档强制内容获取hasLayout = true (参见小提琴)时，它没有解决任何问题。

所以我会说这不是真的也不是假的。相反，它可能是未定义的。我在同一个文档中提到了这个属性的来源：

object.currentStyle.hasLayout

如果我们看看关于内容属性的W3文档，它会说：

生成的内容不会更改文档树。特别是，它没有反馈给文档语言处理器(例如，用于修复)。

因此，--可能得出的结论是，生成的内容不是对象，因此它没有currentStyle属性，因此也没有将hasLayout设置为true。这就是过滤器不能处理生成的内容的原因，从而回答了这个问题。

乍一看，我以为我在上面那把小提琴的控制台里找到了一个提示：

代码语言：javascript
复制
document.querySelectorAll('div')[0].currentStyle.hasLayout; 
// true

document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle': 
// object is null or undefined

但正如@BoltClock：querySelectorAll不能访问伪元素。的评论中所提到的。

在filter中还可以找到另一个提示(尽管--不过只是一个提示)，即此msdn介绍了过滤器。中的伪元素不能工作，它指出(强调我的)：

过滤器通过filter属性应用于HTML控件

虽然我不确定"HTML“是什么意思，但我不希望:before伪元素生成的内容被认为是"HTML”。

票数 6
EN

Stack Overflow用户

发布于 2012-05-04 08:19:57

与其为此使用IE的filter样式，您是否考虑使用CSS3Pie

这是一个IE脚本，它增加了对标准CSS box-shadow和渐变的支持，所以您可以在所有浏览器中编写相同的代码，而不必有所有那些IE特定的样式。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/10403916

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档