箱-shadowが、私はショーのように画像とテキストを持つことができるようにHTMLでタイルコンポーネントを作成しようとしている透明ライン/ボーダー

Question

を提示しますIEでのみ表示される2行です。アウトラインと境界線を削除しましたが、それでも何も変更されません。

これを解決する方法はありますか？

.tiles-container{ 
 
    max-width: 350px; 
 
} 
 
    
 
.tile-banner{ 
 
    position: relative; 
 
} 
 
    
 
    
 
.tiles-container .tile-banner .tile-webcontrol-container { 
 
    height: 200px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
.tiles-container .tile-title-container { 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    display: inline; 
 
    margin-left: 20px; 
 
    bottom: 16px; 
 
    margin-right: 60px; 
 
} 
 

 
.tiles-container .tile-title-container .tile-title { 
 
    background-color: #fff; 
 
    color: #243e7b; 
 
    padding-top: 4.85px; 
 
    padding-bottom: 5px; 
 
    -webkit-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
 
    -moz-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
 
    box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
 
    box-decoration-break: clone; 
 
    line-height: 1.55em; 
 
}

<div class="tiles-container"> 
 
<div class="tile-banner"> 
 
    <div class="tile-webcontrol-container" id="6878d5d7-31df-4ab4-9019-bdf129eff4c4" style="background-position: center; background-image: url('//c1.staticflickr.com/4/3956/15495749937_b4ee958d86_h.jpg'); background-size: cover;"> 
 
    <div class="ris-container"></div> 
 
    </div> 
 
    <div class="tile-title-container"> 
 
    <span class="tile-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. bla bla</span> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

span

CSSでdisplay:blockまたはinline-blockを追加します。

.tiles-container .tile-title-container .tile-title { 
    background-color: #fff; 
    color: #243e7b; 
    padding-top: 4.85px; 
    padding-bottom: 5px; 
    -webkit-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
    -moz-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
    box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; 
    box-decoration-break: clone; 
    line-height: 1.55em; 
    display: block; 
    } 

デモ：http://jsfiddle.net/lotusgodkk/GCu2D/2159/