的box-shadow在IE中呈現透明線/邊框

我試圖創建HTML瓷磚組件，允許有一個圖像和文本顯示：的box-shadow在IE中呈現透明線/邊框

正如你可以看到有是隻在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>

來源

2017-10-10 Juan Jardim

你的問題是衆所周知的。除非使用內嵌塊或塊元素，否則無法修復。至少沒有人找到解決方案。 – Salketer

[在IE11中從CSS box陰影中移除1px透明空間的可能的重複？]（https://stackoverflow.com/questions/22161981/remove-1px-transparent-space-from-css-box-shadow-in-ie11 ） – Salketer

添加display:block或inline-block在span

CSS：

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

來源

2017-10-10 07:33:52

嗨，謝謝你的回答，但我需要保持標籤周圍的區域。我無法使用display：block來獲得最終解決方案 –

@JuanJardim根據您的要求，我建議您爲同一課程的文本使用兩個不同的跨度。你的問題將得到解決。 –

的box-shadow在IE中呈現透明線/邊框

回答

相關問題