CSS伪元素在Safari上的位置不正确

Question

我编写了以下使用伪元素设计页脚的CSS。在Windows的Chrome和Firefox上似乎可以正常使用，但在Safari上，footer_il::after位于页面底部。

当我在margin-top: -20em;上添加.footer_il::after时，它可以按照我想要的方式工作，但显然在其他浏览器上会中断。

.footer_il::before {
  width: 75px;
  height: 70px;
  -webkit-transform: rotate(134deg);
  -ms-transform: rotate(134deg);
  transform: rotate(134deg);
  left: calc(100% - 463px - 85px);
  margin-top: -2em;
}

.footer_il::after {
  height: 54px;
  left: 0;
  width: calc(100% - 449px - 63px);
}

.footer_il::before,
.footer_il::after {
  z-index: 100;
  position: absolute;
  content: "";
  background-color: #f7f7f7
}

.footer {
  height: 20em;
  background-color: #000;
  width: 100%;
  display: inline-flex;
}

  <!-- Footer -->
  <footer class="footer_il bg-light">
    <div class="footer">
      <div class="footer_section_1">
        <div class="footer_container">
          <div class="footer_branding">
            <div class ="footer_logo">
              
            </div>
        </div>
      </div>
      </div>
      <div class="footer_section_2">

      </div>
      <div class="footer_section_3">
        <div class="footer_container">
        </div>
      </div>
      <div class="footer_section_4">
        
      </div>
    </div>
  </footer>

Answer 1

我已将整个页脚添加到一个容器中。将类别设置在绝对位置和100％宽度。然后添加到:: after class 0到顶部的距离内。

现在它可以在Mac OS Safari上运行。因为在到达预期位置之前没有顶部。

.footer_entire_container {
  position: absolute;
  width: 100%;
}

.footer_il::before {
  width: 75px;
  height: 70px;
  -webkit-transform: rotate(134deg);
  -ms-transform: rotate(134deg);
  transform: rotate(134deg);
  left: calc(100% - 463px - 85px);
  margin-top: -2em;
}

.footer_il::after {
  height: 54px;
  left: 0;
  top: 0;
  width: calc(100% - 449px - 63px);
}

.footer_il::before,
.footer_il::after {
  z-index: 100;
  position: absolute;
  content: "";
  background-color: #f7f7f7
}

.footer {
  height: 20em;
  background-color: #000;
  width: 100%;
  display: inline-flex;
}

<!-- Footer -->
  <div class="footer_entire_container">
    <footer class="footer_il bg-light">
      <div class="footer">
        <div class="footer_section_1">
          <div class="footer_container">
            <div class="footer_branding">
              <div class ="footer_logo">
              
              </div>
          </div>
        </div>
        </div>
        <div class="footer_section_2">

        </div>
        <div class="footer_section_3">
          <div class="footer_container">
          </div>
        </div>
        <div class="footer_section_4">
        
        </div>
      </div>
    </footer>
  </div>