的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>

你的问题是众所周知的。除非使用内嵌块或块元素，否则无法修复。至少没有人找到解决方案。 – 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/

嗨，谢谢你的回答，但我需要保持标签周围的区域。我无法使用display：block来获得最终解决方案 –

@JuanJardim根据您的要求，我建议您为同一课程的文本使用两个不同的跨度。你的问题将得到解决。 –

的box-shadow在IE中呈现透明线/边框

相关推荐