时间戳

首页 > 解决方案 > CSS 伪元素在 Safari 上未正确定位

html - CSS 伪元素在 Safari 上未正确定位

问题描述

我编写了以下使用伪元素设计页脚的 CSS。看起来它在 Windows 上的 Chrome 和 Firefox 上运行良好，但在 Safarifooter_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>

标签： htmlcsspseudo-element

解决方案

因此，只需稍微玩一下，我就得到了以下结果。感谢 pschueller 的提示。

我已将整个页脚添加到容器中。将类设置为绝对位置和 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>

推荐阅读