Question

我有一个div在Firefox和IE 11中没有正确定位，尽管它在Chrome和MS Edge中正确定位。

我尝试按其他帖子的建议添加{clear: both}和{overflow: hidden}，但没有运气。

我希望滚动鼠标位于屏幕的底部中央，但它会向右移动。

我创建了a fiddle，您可以在Firefox和IE 11中看到它的定位已关闭。

HTML：

<div class="container-fluid vertical-center">
  <div class="welcome">
  <h1>HELLO, WELCOME</h1>
  <br>
  <h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
  <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
  <br>
</div>

<div class="scroll-downs">
  <div class="mousey">
   <div class="scroller"></div>
     </div>
  </div>
</div>

CSS：

.container-fluid {
   margin-left: auto;
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px
}
.container-fluid::after {
   content: "";
   display: table;
   clear: both
}
.vertical-center {
   min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome {
  text-align: center;
}
.scroll-downs {
  position: absolute;
  bottom: 20px;
  margin: auto;
  width: 37px;
  height: 55px;
}
.mousey {
  width: 37px;
  padding: 10px 15px;
  height: 55px;
  border: 2px solid #666;
  border-radius: 25px;
  opacity: 0.75;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #666;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0;}
}

Answer 1

问题在于：您尝试使用margin:auto将绝对定位的元素居中，这很好 - 除非您没有为其指定任何水平定位值（left / { {1}}）。

当使用这种技术将绝对定位的元素居中时，必须定义这些值（通常值为0就足够了），否则您将受浏览器默认行为的支配。因此，请将声明块修改为：

right

这是一个JSFiddle来显示代码的实际效果。希望这可以帮助！如果您有任何问题，请告诉我。

Div在Firefox 50.0和IE 11中无法正确定位

1 个答案: