CSS3 - 透明边框出现在Box Shadow中，用于Internet Explorer中的多行标题

Question

透明边框出现在标题背景上，在Internet Explorer（9,10，Edge）中框阴影和背景之间有框阴影。

http://jsfiddle.net/verber/WmRT3/

这是我添加的风格：

background: rgb(130, 210, 250); 
box-shadow: 10px 0px 0px #82d2fa, -10px 0px 0px #82d2fa;

在一些Stack Overflow Answers中，他们提到放置box-decoration-break: clone;但它不支持Internet Explorer。有没有解决方法？

请参阅以下链接：http://example.com/project/invoices/4137?callback=ng_jsonp.__req0.finished

Answer 1

试试这个

.title {
  font: 20px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 45px;
  display: inline-block;
  width: 300px;
}
.title .highlight {
  display: inline;
  background: #ee4035;
  color: white;
  padding: 0.5rem;
  padding-left: 0;
  padding-right: 10px;
  white-space:pre-wrap;
}
.title.step-1 .highlight {
  box-shadow: -10px 0 0 #ee4035,-10px 0 0 #ee4035;  
}