2

我目前正在一个网站上工作，该网站的设计主要“欢迎文字”包含多行（因为它是关于产品的简短介绍）。这有一个透明（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+ 中不起作用。它可以在 FF 中使用box-decoration-break: clone;，但这在我这边不起作用。

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

4

2 回答 2

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

所以我在想，也许您的网站可能处于怪癖模式，或者使用 IE11 以外的其他渲染模式。

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

请注意，在该博客文章的评论中确实提到它在 Firefox 中不起作用，但有人有发布代码。 在此处输入图像描述

于 2015-07-31T13:33:08.047 回答
0

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

于 2015-07-31T13:29:07.857 回答