Bootstrap 对齐错误只发生在 Internet Explorer 中

Question

我的网站上有一个错误，只出现在 Internet Explorer 中，我不知道如何修复它。我已经检查过我的代码中是否有任何未关闭的元素。

在 Chrome 中，元素正确对齐：enter image description here

在 Internet Explorer 中，元素相互覆盖 enter image description here

这是我的 HTML 代码

  <div  class="hellgrau">
      <div class="kontaktcontainer container d-flex justify-content-center">
        <div class="row">
          <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
            <i class="icon fa fa-phone fa-3x"></i>
            <h2>Telefon</h2>
              <hr class="pg-titl-bdr-btm">
                <p class="kontaktbereich"> Tel: 0211 - 205 444 80 <br> Fax:0211 - 205 444 81 </p>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
              <i class="icon text-center fa fa-envelope fa-3x"></i>

              <h2> Mail</h2>
                <hr class="pg-titl-bdr-btm">
                <a href="mailto:kontakt@mabs40.com?subject= TISAX Beratung">
                  <p class="kontaktbereich"> kontakt@mabs40.com <br>  </p>
                </a>
              </div>
              <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
                <i class="icon fa fa-map-marker fa-3x"></i>
                <h2> Adresse</h2>
                  <hr class="pg-titl-bdr-btm">
              <p class="kontaktbereich">Großenbaumer Weg 8 <br> 40472 Düsseldorf</p>
                </div>
          </div>
        </div>
      </div>

这是我的 CSS：

.kontakt{
    padding-left: 80px;
    padding-right: 80px;
}

Answer 1

问题与 Bootstrap Flex 有关，请尝试删除“d-flex”：

  <div  class="hellgrau">
      <div class="kontaktcontainer container justify-content-center">
        <div class="row">
          <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
            <i class="icon fa fa-phone fa-3x"></i>
            <h2>Telefon</h2>
              <hr class="pg-titl-bdr-btm">
                <p class="kontaktbereich"> Tel: 0211 - 205 444 80 <br> Fax:0211 - 205 444 81 </p>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
              <i class="icon text-center fa fa-envelope fa-3x"></i>

              <h2> Mail</h2>
                <hr class="pg-titl-bdr-btm">
                <a href="mailto:kontakt@mabs40.com?subject= TISAX Beratung">
                  <p class="kontaktbereich"> kontakt@mabs40.com <br>  </p>
                </a>
              </div>
              <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center kontakt">
                <i class="icon fa fa-map-marker fa-3x"></i>
                <h2> Adresse</h2>
                  <hr class="pg-titl-bdr-btm">
              <p class="kontaktbereich">Großenbaumer Weg 8 <br> 40472 Düsseldorf</p>
                </div>
          </div>
        </div>
      </div>

结果是这样的：

Bootstrap 对齐错误只发生在 Internet Explorer 中

Bootstrap alignment bug only occuring in internet explorer

css

internet-explorer

alignment

bootstrap-4