CSS3 - Internet Explorerで複数の行タイトルが透明に表示されます。

Question

Internet Explorer（9,10、Edge）のボックスの影と背景の間に透明な枠がタイトルの背景に表示されます。彼らはbox-decoration-break: clone;を置くことを述べてきたが、そのInternet Explorerをサポートしていないいくつかのスタックオーバーフローの回答で

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

：

Please check Image

この

は私が追加したスタイルです。回避策はありますか？

下記のリンクを参照してください：http://jsfiddle.net/verber/WmRT3/

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

をお試しください