Question

在我的代码中，margin-left：仅在其他浏览器中有效。在Firefox中，似乎我需要将我给左边距的每个值加倍：这对其他浏览器有效。我需要破坏的元素是蓝色圆圈。

如果我检查元素并在检查器中更改css，然后给出margin-left：60px（我的margin-left：通常为30px），它将起作用。 1em也一样（我放了2em即可）。

我只是编队，所以我不是专家，所以如果你们中的一个人可以看到我在哪里犯了错误，请先谢谢您告诉我！

这是我的代码

.cercle-logo {
  height: 65px;
  width: 65px;
  color: #5CADD3;
  border: 2px solid #EBEBEB;
  margin-top: 15px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.cercle-logo:before {
  content: "";
  border: 5px solid white;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: #5cadd3;
  position: absolute;
  margin-left: 2em;
  box-sizing: border-box;
}

<div>
  <span class="cercle-logo"><i class="fa fa-chart-pie fa-2x"></i></span>
</div>

Answer 1

某些浏览器将父填充用作绝对位置子元素的偏移量（chrome会这样做），因为很明显，您将使用left,right,top,bottom而不是边距 < / p>

假设您在父级上有padding-left:20px，并且在其中一个子级上设置了绝对位置，如果您看不到太大的变化，因为某些浏览器使用该20px并将其添加为偏移量{{ 1}}

一种简单的解决方案是保留偏移量，然后使用边距将其偏移，我不建议您使用left:20px属性将其偏移。

left

.cercle-logo {
  height: 65px;
  width: 65px;
  color: #5CADD3;
  border: 2px solid #EBEBEB;
  margin-top: 15px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.cercle-logo:before {
  content: "";
  border: 5px solid white;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: #5cadd3;
  position: absolute;
  left: 3.7em;
  box-sizing: border-box;
}

Answer 2

谢谢您的回答，但是我可能做错了什么，因为即使您的解释很清楚，并且“代码段”也能很好地工作（我直接在Firefox上进行了测试），当我在Bracket中编写并进行测试时，它使我的蓝色圆圈完全移到左侧，但是这次在每个浏览器上都... 有什么我想念的吗？

无论如何，谢谢您的时间！

margin-left在Firefox中不起作用

2 个答案: