【问题标题】：Box shadow rendering issues盒子阴影渲染问题
【发布时间】：2015-07-31 12:58:50
【问题描述】：

我目前正在开发一个网站，该网站的设计主要“欢迎文字”包含多行（因为它是关于产品的简短介绍）。这有一个透明的（0.7）白色背景（rgba(255,255,255,0.7) 带有多行填充。是的，我说的是多行填充。这意味着，每一行文本都有顶部、底部、左侧和右侧填充、背景颜色和线条之间还有一个小的透明空间。

为了做到这一点，我使用了一个带有水平偏移的 box-shadow 来模拟每行的左右填充。这适用于除 Internet Explorer 之外的所有浏览器。由于我们希望网站可以在所有浏览器上运行，因此我尝试修复此问题一段时间，但我几乎得出结论，这只是 Internet Explorer 问题。

我使用了 Geoff Muskett 他的示例 (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/)，除了 IE 之外，它确实可以正常工作。

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

即使是 Geoff 他的示例中的代码也不起作用：

HTML

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

CSS

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); 
}

这里有没有人知道这个问题并且知道是否有解决这个问题的方法不是很hacky（不是首选）？

IE 11.0.9600.17905

编辑

2015 年 8 月 3 日 09:32

我这个周末一直在调查这个问题，发现一些人的帖子与我目前遇到的问题完全相同。这似乎是 IE 中的渲染错误。见：https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow

同样在另一个 StackOverflow 帖子中，名为 @nickmorss 的人说使用 box-shadow 来完成多行填充文本在 IE11 和 FF34+ 中不起作用。可以使用 box-decoration-break: clone; 在 FF 中修复它，但这在我这边不起作用。

我认为这是我自己无法在 CSS 中修复的问题，因为这可能只是一个错误。

【问题讨论】：

IE11 11.0.9600.17905

标签： css internet-explorer box-shadow

【解决方案1】：

我发现这在 IE11 中有效

body{
    background-color: blue;
    
}
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); 
}

&lt;h2&gt;&lt;span&gt;Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow&lt;/span&gt;&lt;/h2&gt;

所以我认为您的网站可能处于怪癖模式，或者使用 IE11 以外的其他呈现模式。

按 F12 并转到仿真选项卡，确认您在 IE11 模式下运行。您是否处于正确的文档模式。如果不是，您将不得不修复您的网站以确保它使用正确的文档模式。

请注意，在该博客文章的 cmets 中确实提到它在 Firefox 中不起作用，但有人有发布代码。

【讨论】：

这在 IE11 中不起作用。文档在默认边缘，浏览器配置文件是桌面，用户代理的字符集是默认的。
在我的回答中添加了 Chrome 和 IE11 中的渲染图像。这与您看到的不同还是我错过了理解问题。
这正是我不想要的。在您的示例（图像）中，第二行文本的左右两侧没有填充（'你的家？让这个文本有点'。我想要左右每一行的填充并保持响应，因此强制（硬编码）三个跨度不是解决方案。
所以这在 Chrome 或 IE 中不起作用。这个问题暗示这只是一个 IE 问题。在我的图片中，左侧有 chrome，右侧有 IE，呈现相同的代码。
Ahhh OK 我用原始代码发布解决了 RGBA 问题。现在我明白你的意思了。

【解决方案2】：

不确定它是否会解决它，但尝试将您的 rgba 值声明为 rgba(255,255,255,0.7) 我之前没有看到在 rgba 中使用过十六进制值，这可能会让 IE 感到困惑

【讨论】：

糟糕，这是我已经解决的错误。我会将其更改为正确的 rgba 值。