상자 그림자 내가 쇼 같은 이미지와 텍스트 가질 수 있도록 HTML의 타일 구성 요소를 만들려고 해요

Question

투명한 라인/국경 제공 :

당신이 볼 수 있듯이 IE에서만 볼 수있는 두 줄입니다. 윤곽선과 테두리를 제거했지만 여전히 아무것도 변경하지 않았습니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

.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/이