文本覆盖在某些浏览器中不起作用

Question

我已经成功地创建了具有图像所需的代码，然后是带有文本的子元素并将文本覆盖在图像上。但是它似乎不适用于IE，而且我找不到使用 CSS 的解决方法。

HTML

<div class="row background-lightgrey p-0 m-0 pt-4">
  <div class="col-md-6 m-0 p-0">
    <h2 class="m-4 color-orange font-weight-light">Canvas Ultipro</h2>
    <div class="ican-ultiproImage m-4">
      <img class="w-100" src="assets/images/ultipro.png" height="500" />
    </div>
    <div class="ican-ultiproImageText p-2 pl-5 m-4">
      <div class="row p-0 m-0">
        <div class="col ican-ultipProImageOverlay">
          <h2 class="ican-ultipProImageTitle">
            Canvas UltiPro
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 m-0 p-0">
    <h2 class="m-4 color-orange font-weight-light">Canvas Accord</h2>
    <div class="ican-ultiproImage m-4">
      <img class="w-100" src="assets/images/ultipro.png" height="500" />
    </div>
    <div class="ican-ultiproImageText p-2 pl-5 m-4">
      <div class="row p-0 m-0">
        <div class="col ican-ultipProImageOverlay">
          <h2 class="ican-ultipProImageTitle">
            Canvas UltiPro
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

 .ican-ultiproImage {
    height: 500px;
 }

.ican-ultiproImageText {
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0;
    color: #fff;
    background-color: rgba(107,107,107,0.6);
}

我必须使用纯 CSS，而且我也使用引导程序。我似乎无法理解 IE 中发生了什么导致如此巨大的转变。将ican-ultiproImageText 的宽度设置为auto 或inherited 没有区别。

在 Chrome 上查看

在 IE 上查看

Answer 1

如果加左：0；像CSS一样

.ican-ultiproImageText {
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0;
    color: #fff;
    background-color: rgba(107,107,107,0.6);
}

那么它应该可以工作了。