使用Bootstrap在IE上的图像上的文本覆盖不起作用

Question

我目前正在努力使文字叠加功能在IE上正常工作。我正在使用bootstrap v2.3.0，目前的样式适用于Chrome，FF，Safari，但不适用于IE。这是在firefox

上的外观

但是当我在IE上进行检查时，文字叠加层不在图像顶部，并且看起来像这样。

这是卡Promoting Equity的HTML：

                                        <!-- row 1 -->
                                        <div class="row m-5 ar-grid-row">
                                          <div class="container">
                                            <!-- 1 -->
                                            <button class="ar-grid span4 justify button-promoting-equity" onclick="bgImg('https://www1.nyc.gov/assets/records/images/content/hero/open-saturdays%20new%20.jpg', 'promoting-equity')">
                                              <div class="ar-grid-img">
                                                <img src="http://pluspng.com/img-png/png-square-shape-square-shape-of-four-angles-comments-980.png" alt="">
                                              </div>
                                              <h1 class="ar-grid-header">Promoting Equity</h1>
                                            </button>

这是CSS样式：

.ar-grid-img {
max-width: 50%;
padding: 10px;
}
.ar-grid-header {
  margin: auto 0;
  font-size: 18px;
  text-align: center;
  position: absolute;
}