框阴影渲染问题

Question

我目前正在开发一个网站，其设计主要是欢迎文字＆＃39;包含多行（因为它是关于产品的简短介绍）。这有一个transparant（0.7）white（rgba(255,255,255,0.7)带有多行填充的背景。是的，我说的是多行填充。这意味着，每行文本都有top，bottom，left和right padding，background颜色以及线条之间的小透明空间。

为了实现这一点，我使用了一个带有水平偏移的盒子阴影来模拟每条线上的左右填充。这适用于除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中修复，但这不适合我。

我认为这是我自己无法解决的问题，因为这可能只是一个错误的错误。

Answer 1

我发现这在IE11中有效

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

请注意，在该博客文章的评论中，它确实提到它在Firefox中不起作用，但有人有邮政编码。

Answer 2

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