CSS filter在Firefox/IE中失效：按钮内图片hover模糊问题求助

你遇到的这个问题我之前也碰到过——Firefox对<button>内部元素的filter属性有特殊的渲染限制，而IE本身就不支持标准的CSS模糊滤镜。下面给你几个实用的解决方案：

方案一：给图片包裹容器并调整按钮样式 #

最稳妥的办法是给图片套个容器，同时重置按钮的默认样式，打破Firefox的渲染限制，还能保留按钮的交互特性：

修改后的HTML代码 #

<button type="button" class="img-btn">
  <span class="img-wrapper">
    <img src="http://factory38.com/gallery-images/tree_thumb.jpg" width="200" alt="tree">
  </span>
</button>

修改后的CSS代码 #

/* 重置按钮默认样式，避免Firefox的渲染限制 */
.img-btn {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  /* 如果你需要保留按钮的边框/背景样式，直接添加对应的属性即可 */
}

/* 给容器内的图片添加hover模糊效果 */
.img-wrapper:hover img {
  filter: blur(2px);
}

这个方案能让Chrome、Opera、Edge、Firefox都正常生效，灵活性很高。

方案二：触发硬件加速兼容Firefox #

如果不想改动HTML结构，可以尝试给图片添加硬件加速属性，强制Firefox渲染filter效果：

button>img:hover {
  filter: blur(2px);
  /* 触发硬件加速，让Firefox识别filter */
  transform: translateZ(0);
  /* 兼容老版本Firefox */
  -moz-transform: translateZ(0);
}

这个方案无需调整HTML，但只解决Firefox的问题，IE仍然不支持。

方案三：IE兼容方案 #

IE不支持标准的CSS filter属性，你可以用SVG滤镜来实现模糊效果：

步骤1：在HTML头部添加SVG滤镜定义 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;">
  <defs>
    <filter id="ie-blur">
      <feGaussianBlur stdDeviation="2" />
    </filter>
  </defs>
</svg>

步骤2：修改CSS兼容IE #

/* 现代浏览器生效 */
button>img:hover {
  filter: blur(2px);
  transform: translateZ(0);
}

/* 仅IE浏览器生效 */
@media screen\0 {
  button>img:hover {
    filter: url(#ie-blur);
  }
}

这样IE就能通过SVG滤镜实现和现代浏览器一致的模糊效果了。

内容的提问来源于stack exchange，提问作者cj smith