Question

我正在试图弄清楚如何让灰度在IE 10和11中工作。我有一个图标网格，我想要灰度。它是这样构建的：

<ul class="medium-block-grid-4 large-block-grid-4">

    <li>
        <a href="#"><figure class="cap-bot report-10x10">
            <figcaption>Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

    <li>
        <a href="#"><figure class="cap-bot report-10kbonus locked">
            <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br> Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

<ul>

第一个数字是全彩色。第二个图包含“锁定灰度”类，使整个图形变灰。它在Chrome，Safari和Firefox中运行良好。但它在IE中不起作用。

我已经查看了各种解决方案并试图实现一些jQuery插件（例如this one和this one），但似乎它们专门用于灰度图像。有没有办法在IE中灰度不是图像的项目？我的图标包含在带蓝色边框的方形蓝色div中，我想强制一切都变成灰色。

更新：这是fiddle，其中包含相关图标。

Answer 1

试试这个css

＆＃13;

a i.fa{color:#ccc;}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>    
<li>
    <a href="#"><figure class="fig-1 cap-bot">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
<li>
    <a href="#"><figure class="fig-2 cap-bot locked grayscale">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
</ul>

＆＃13;

IE 10和11中的灰度？

1 个答案: