时间戳

首页 > 解决方案 > CSS Transform Translate 在 Chrome 和 Firefox 中的定位不同？

css - CSS Transform Translate 在 Chrome 和 Firefox 中的定位不同？

问题描述

嗨，我在我的网站上定位伪元素时遇到问题。它在 Chrome 中正确地居中于英雄视频，但在 Firefox 中，它一直位于右侧。这是CSS：

.hero-container {
  z-index: -1;
  position: relative;
  text-align: center;
  background-color: #fff;
  width: 100% !important;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}


.hero-container::after {
  content: 'Welcome Home.';
  z-index: 5000;
  background-color: rgba(36,88,141,0.7);
  color: #FFF;
  font-family: 'PTSerifRegular', verdana, arial, sans-serif !important;
  font-size: 40px;
  padding: 10px;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translate(-50%,-40%);
  transform: translate(-50%,-40%);
}

这是正在进行的网站： http: //ciminocarestg.wpengine.com/

有关如何解决此问题或是否有更好的方法可以完成此问题的任何提示？我在网站上使用 Bootstrap（嗯，UnderStrap），如果有帮助的话，它是建立在 Wordpress 上的。

谢谢。

标签： csstransformtranslate

解决方案

推荐阅读