html - 输入偏移光标上的 IE8 阴影过滤器

Question

DXImageTransform.Microsoft.Shadow 过滤器移动输入的视觉呈现，但光标留在其原始位置。

CSS:

input {
    filter:
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);
}

演示页面:http://jsfiddle.net/zerkms/Pzqtd/

如果您在 IE8 或 IE9 中打开它，您会看到输入的光标位于输入上方 50px。

那么有什么想法可以解决这个问题，或者有其他解决方案可以在 IE8 中为输入创建阴影吗？

我特别需要 IE8 的阴影 - 我不能使用 box-shadow

Answer 1

这有点像 hack，但对我有用。您可能需要稍微调整一下。 http://jsfiddle.net/subash1232/DDUvP/

HTML:

<div class="shadow">
</div>

<input type="text" value="value" />

CSS

input {
   border: 1px solid red;
   position: relative;
   width: 178px;
   top: 34px;
   left:9px;
   z-index: 1000;
}

.shadow{
   height: 20px;
   width: 180px;
   background: white;
   filter:  
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);

}