我最近发现WebKit浏览器（至少在OSX下）存在一种奇怪的行为，解决起来比我想象的要花费更长的时间！
本质上：在元素上设置 filter: blur(0) （或供应商特定的 -webkit-filter）应该意味着不对元素应用任何形式的模糊。
然而，当分配blur(0)或指定单位的零（即：blur(0px)）时，WebKit仍会使元素模糊。
我已经组合了一个快速的演示，以证明这一点： http://jsfiddle.net/f9rBE/
这显示了三个包含文本的相同 div（没有自定义字体）：
<div class="no-blur">
<p><strong>This has absolutely nothing assigned</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis orci in quam venenatis, in tempus ipsum sagittis. Suspendisse potenti. Donec ullamcorper lacus vel odio accumsan, vel aliquam libero tempor. Praesent nec libero venenatis, ultrices arcu non, luctus quam. Morbi scelerisque sit amet turpis sit amet tincidunt. Praesent semper erat non purus pretium consequat. Aenean et iaculis turpis. Curabitur diam tellus, consectetur non massa et, commodo venenatis metus.</p>
</div>
其中一个没有任何样式，而另外两个有blur(0)和blur(0px)的样式：
.no-blur{}
.zero-px-blur{
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
.zero-blur{
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
}
如果您在Safari或Chrome中查看，底部两个会模糊：
几点值得注意的是：
- 这种意外模糊也会发生在iOS7设备上的Safari（iPhone和iPad）上； - 它也会发生在OSX下的Chrome和Safari上； - 它似乎不会发生在非Retina苹果硬件上的Chrome和Safari中； - 在OSX中的FireFox下不会发生。
当然，
filter：blur在Firefox中还没有得到支持，因此很难判断我所看到的行为是故意的/预期行为，还是这是Webkit中的一个错误？我最终得出结论，使用
blur(none)可以达到所需的效果（即删除所有模糊效果），但我困惑于为什么使用零不具有相同的效果，因为在其他滤镜示例（例如：filter：grayscale）中，可以仅使用零而不是none关键字来重置它。为什么会这样呢？