Box-shadow в IE представляет собой прозрачную линию/границу

Я пытаюсь создать компонент плитки в HTML, который позволяет иметь изображение и текст, как показано:

Визуализация 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>


html css internet-explorer internet-explorer-11 box-shadow
person Juan Jardim    schedule 10.10.2017    source источник
comment
Ваша проблема хорошо известна. И не может быть исправлено, если вы не используете встроенные блочные или блочные элементы. По крайней мере, решения пока никто не нашел.   -  person Salketer    schedule 10.10.2017
comment
Возможный дубликат Удалить прозрачное пространство 1px из тени окна CSS в IE11?   -  person Salketer    schedule 10.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте 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/

person K K    schedule 10.10.2017
comment
Привет, спасибо за ответ, но мне нужно оставить область вокруг этикетки такой, какая она есть. Я не могу использовать дисплей: блок для окончательного решения - person Juan Jardim; 10.10.2017
comment
@JuanJardim В соответствии с вашими требованиями я предлагаю вам использовать два разных диапазона для текста с одним и тем же классом. Ваша проблема будет решена. - person K K; 10.10.2017