Firefox的CSS边距

Question

我为复选框之间的间隔编写了CSS边距。在chrome上可以正常使用，但在Firefox上则不能。

这是CSS

.vehicle-types {
  float:left;
  width:100%;
  margin: 6px 0;
  .check-vehicle {
    float:left;
    width:100%;
    .checkbox-btn {
      width: auto;
      display: inline-block;
      margin-right: 20px;
      float:left;
      input {
        float:left;
        width:0 !important;
      }
      label {
        margin:0 !important;
        float:left;
      }
    }
  }
}

是否有特定于Firefox浏览器的CSS？ （以下屏幕截图） 预先感谢。

Chrome

Firefox

Answer 1

好的，所以我在写这篇文章之前就写了这个答案。我仍然要遍历代码，但是作为替代，您可以尝试一下，看看它是否有效

更新：您只有共享的CSS，但仍然很难理解

将所有内容都放在同一行上的理想解决方案是这样做。

.parent-div {
display: flex; 
flex-direction: row;
justify-content: space-between
}

.child-div {
align-items: center;
display: flex;
flex-direction: row;
}

.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}

p {
margin-left: 5px;
}

<div class="parent-div"> 
  <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
</div>
   

在上面的代码中，我使用了 flex

flex-direction 说，您是否希望将div以行或列的形式堆叠，例如，将此等同于视为 bootstrap 类row。 （如果您以前使用过引导程序）

justify-content: space-between ：空格之间的距离在每个正方形之间相等，但在正方形与容器之间不相等。

注意：您也可能使用了空格

Space-around 在正方形的两边都放了相等的空间，这意味着最外面的正方形和容器之间的距离是两个正方形之间的一半（每个正方形贡献不重叠的相等量的边距，从而使空间增加一倍。

align-items: center; 只需将div中的所有内容对齐到x-y轴中心

当我学习flexboxes时，我发现这篇文章非常有用（也可能对您有帮助）

Answer 2

看起来，Firefox版本也将该边距添加到第一个孩子。

为避免这种情况，请使用：

.checkbox-btn:not(:first-child) {
  ...
  margin-right: 20px;
  ...
}

Answer 3

我也遇到了这类问题，但是使用IE，下次您可以使用此代码 它只会显示在Firefox上，您可以编辑所需内容，并且只会显示在Firefox上

@-moz-document url-prefix() {
  //just write the code here
     } 

我从您的代码中知道这不是问题，但是如果是这种情况，则可以转到： https://caniuse.com/

并检查是否是您的代码