所有IE浏览器中的CSS3文本阴影失真/像素化（见截图请参阅）

Question

我只是将文字阴影放在一个元素上，除了IE之外，它在所有浏览器中看起来都很好。

看到文字周围的黑色像素？

color: #68C3C7;
font-family: "Hoefler Text",Baskerville,"Big Caslon","Adobe Garamond Pro",Georgia,Palatino,"Times New Roman",serif;
font-size: 30px;
letter-spacing: 1.2px;
line-height: 30px;
padding: 20px 0 0;
text-align: center;    
text-shadow: 1px 1px 0px #999999;
filter: dropshadow(color=#999999, offx=1, offy=1);

Answer 1

您可以结合使用IE的chroma & drop shadow过滤器。检查一下：http://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/

以下是一些示例代码：

color: #68C3C7;
font-family: "Hoefler Text",Baskerville,"Big Caslon","Adobe Garamond Pro",Georgia,Palatino,"Times New Roman",serif;
font-size: 30px;
letter-spacing: 1.2px;
line-height: 30px;
padding: 20px 0 0;
text-align: center;    
text-shadow: 1px 1px 0px #999999;
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
        progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#99999);

Answer 2

你可能需要为ie8增加一个参数：

.shadow {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}