Css 盒阴影渲染问题

我目前正在一个网站上工作，该网站的主要“欢迎文字”包含多行文字（因为它是关于产品的简短介绍）。这有一个透明的（0.7）白色背景（

rgba（255255255,0.7）

），带有多行填充。是的，我说的是多行填充。这意味着，每行文本都有顶部、底部、左侧和右侧填充、背景色以及行之间的一个小的透明空间

为了实现这一点，我使用了一个带有水平偏移的框阴影来模拟每一行的左右填充。这在除Internet Explorer之外的所有浏览器上都有效。由于我们希望让站点在所有浏览器上工作，我尝试了一段时间来解决这个问题，我几乎得出结论，这只是一个Internet Explorerr问题

我使用了Geoff Muskett的例子（），除了IE之外，它也能正常工作

问题是，当我在IE中打开页面时，框阴影看起来有些模糊，即使我将模糊设置为0像素（或者只是没有添加，两者都不起作用）

甚至Geoff示例中的代码也不起作用：

HTML

<h2><span>Could you benefit from having Alfi in your home?</span></h2>

这里是否有人知道这个问题，并且知道是否有一个解决方案不是很老套（不是首选）

IE 11.0.9600.17905

---

编辑 2015年8月3日09:32

本周末我一直在调查这个问题，发现一些人的帖子与我目前的问题完全相同。这似乎是IE中的一个渲染错误。请参阅：

在另一篇StackOverflow帖子中，一位名叫@nickmorss的人说，使用

框阴影来完成多行填充文本在IE11和FF34+中不起作用。它可以在FF中使用
框装饰中断：克隆；
来修复，但在我这边不起作用

我认为这是我自己在CSS中无法解决的问题，因为这可能只是一个小错误。
不确定它是否能解决问题，但尝试将您的rgba值声明为
rgba（255255255,0.7）
我以前没有看到rgba中使用十六进制值，这可能会让IE感到困惑。
我发现这在IE11中有效


正文{
背景颜色：蓝色；
}
h2{
线高：1.8em；
字体大小：1.7em；
显示：内联；
}  
h2 span{
填充：0.2米；
盒形阴影：0.2em0.rgba（255,255,255,0.7），-0.2em0.rgba（255255,0.7）；
背景色：#fff；
背景色：rgba（255255,0.7）；
}
在家中使用Alfi能让您受益吗？将此文本加长一点，以便它包装在stackoverflow上
IE11 11.0.9600.17905Oops，这是一个我已经解决的错误。我将更改为正确的rgba值。这在IE11中不起作用。文档位于默认边缘，browserprofile是桌面，用户的字符集代理处于默认状态。在我的回答中添加了Chrome和IE11中的渲染图像。这与您看到的不同吗？或者我没有理解问题。这正是我不想要的。在您的示例（图像）中，第二行文本的左右两侧没有填充（“你的家？把这篇文章写一点”。我想在左右两边的每一行加上填充，同时保持它的响应性，所以强制（硬编码）三跨不是解决方案。所以这在Chrome或IE中不起作用。这个问题暗示这只是IE问题。在我的图像中，Chrome在左侧，IE在右侧，代码呈现相同。啊，好吧，我用原始代码发布修复了RGBA问题。现在我明白你的意思了。
h2 { 
   line-height: 1.8em; 
   font-size: 1.7em;   
   display: inline; 
}  
h2 span { 
   padding: 0.2em; 
   box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);    
   background-color: #fff; 
   background-color: rgba(255,255,255,0.7); 
}