我正在使用 Gray对于网站上的一些元素。但是，我无法让它在 IE11 中工作。例如，在下面的 fiddle 中，我使用 JS 添加了 grayscale 和 grayscale-fade 类，以便图像在悬停时从彩色渐变为灰度。我如何让它在 IE11 中工作？作者说该插件需要针对 IE11 进行初始化(即 $('article.project img').gray();)，但是如果我添加该行，所有图像都会变灰默认从一开始。我只是想让它在 IE11 中工作。有人可以告诉我怎么做吗？

fiddle :http://jsfiddle.net/61jcam54/

HTML

<div id="content">
    <article class="project">
        <img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
        <div class="overlay" style="margin-left: -1px; width: 367px;">
            <h3>Project Title</h3>
            <a class="post-link expand" href="http://google.com">+</a>
        </div>
    </article>
</div>

CSS

article.project {
  float: left;
  margin: 0 1% 2%;
  max-width: 375px;
  overflow: hidden;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

article.project img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

article.project .overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.hover .overlay, .active .overlay, .hover-sticky .overlay {
    opacity: 1;
}

article.project .overlay h3 {
  color: #FFF;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 3.3em;
  padding: 0 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

article.project .overlay .expand {
  border: 5px solid #FFF;
  bottom: 0;
  color: #FFF;
  display: block;
  font-size: 30px;
  height: 60px;
  left: 0;
  line-height: 50px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: 2;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

/* GRAYSCALE */
.grayscale, .grayscale-sticky {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

    /* IE 6-9 */
    filter: gray;

    /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .2s;
}

.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

.grayscale.grayscale-replaced > svg {
    opacity: 1;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
    opacity: 0;
}

JS

$('#content').on('mouseenter', 'article.project', function(){

    $(this).addClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').hide();

}).on('mouseleave', 'article.project', function(){

    $(this).removeClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').show();

});

最佳答案

长话短说

这是一个 updated example that works in IE11以及所有其他支持的浏览器。

解释

有几个问题...

根据 the plugin that you are using ，当浏览器不支持 CSS3 过滤器(如 IE10/11)时，以下内容适用:

...the plugin uses Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.

自 img元素需要在 IE11 中替换为 SVG 元素，需要插件脚本(带有 Modernizr shiv)才能使其工作。在您提供的 jsFiddle 示例中，脚本 jquery.gray.min.js实际上甚至没有在 IE11 中执行，因为它由于不匹配的 MIME 类型而被阻止(此警告在控制台中)。

为了解决这个问题，我只是将脚本复制/粘贴到示例中。此外，值得注意的是 Modernizr docs声明脚本必须在<body>之前执行负载。这似乎在 IE 中使用 HTML5 Shiv 时是相关的:

The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.

现在脚本实际上是在 IE11 中执行的，插件需要初始化并且 img元素需要用 SVG 替换。根据插件，img如果元素具有 .grayscale 类，元素将被自动替换.或者，看起来您也可以使用自定义 .gray()方法也是。因为你的例子实际上并没有给类 .grayscale到 img元素，它不会在 IE11 中被初始化。

在下面，您会注意到我添加了类 .grayscale到 img元素(以便在 IE11 中对其进行初始化)。此外，类(class).grayscale-off也被添加到元素中，以便最初关闭 灰色效果。在更新的 jQuery 中，您会看到这个类只是被切换。

这里是相关更新的 HTML/CSS/jQuery:

Updated Example Here

我也稍微缩短了 jQuery:

$('#content').on('mouseenter mouseleave', 'article.project', function (e){
    $('.grayscale', this).toggleClass('hover grayscale-off');
    $(this).find('.post-link').toggle();
});

.grayscale.grayscale-replaced > svg {
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg {
    opacity: 1;
}

<div id="content">
    <article class="project">
        <img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" />
        <div class="overlay">
            <h3>Project Title</h3>
            <a class="post-link expand" href="...">+</a>
        </div>
    </article>
</div>

关于javascript - 悬停时颜色变为灰度在 IE11 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29166214/