IE (10) 不能很好地在输入上渲染 Box 阴影答案

【问题标题】：IE (10) Does not render Box shadow well on inputsIE (10) 不能很好地在输入上渲染 Box 阴影
【发布时间】：2014-09-19 01:57:24
【问题描述】：

我创建了以下 jsbin 来显示问题。 http://jsbin.com/fewuli/2/ 如果您在除 IE10 之外的任何浏览器中运行它并聚焦输入，那么框阴影轮廓看起来很棒，如下所示：

但如果你在 IE10（或 IE9+）中运行它，它不会像这样将框阴影的顶部呈现在焦点上：

有没有办法在不增加盒子阴影大小的情况下解决这个问题（最后一个选项？）

【问题讨论】：

标签： internet-explorer-10 css

【解决方案1】：

我测试了您提供的链接，并在不同版本的 IE（11、10 和 9）中进行了检查，它们都显示输入框在保持焦点时突出显示。（我使用 IE 工具栏 Emulation 来查看差异）

如果您仍然遇到此问题，您可以尝试添加一个脚本来帮助旧的 IE 浏览器支持 HTML5。 Modernizr 是这些脚本之一，它将以这种方式提供帮助。还有HTML5 Shiv，但只支持 IE 浏览器 9 及更早版本。

另一个建议是尝试 MS Visual Filters and Transitions 并将其应用于您的 INPUT 类：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";

【讨论】：

添加了更多屏幕截图。我不认为 Modernzr 在这里会有所帮助。
用其他一些建议更新了我的答案以解决 IE 问题。
嘿@Tim 你看到我回答的编辑了吗？让这个工作顺利吗？
是的，我最终使用了改变输出的四值语法，但它在 IE 中显示更可靠。盒子阴影：0 0 3px 1px #0095ff;