CSS3 - Bordure transparente apparaît sur Box Shadow pour le titre de plusieurs lignes dans Internet Explorer

Question

La bordure transparente apparaît sur l'arrière-plan du titre avec l'ombre de boîte entre l'ombre de la boîte et l'arrière-plan dans Internet Explorer (9,10, Edge).

Please check Image

C'est le style que j'ai ajouté:

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

Dans certains Stack Réponses Débordement ils ont mentionné à mettre box-decoration-break: clone; mais son ne prend pas en charge Internet Explorer. Y a-t-il une solution de contournement?

S'il vous plaît Se reporter à lien ci-dessous: http://jsfiddle.net/verber/WmRT3/

Answer 1

Essayez cette

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