rails css bootstrap对齐多个表单check_boxes

Question

我试图制作一个rails形式并在图像上对齐多个check_box，当我使用Chrome浏览器但是当我使用其他浏览器时，布局工作正常。 Firefox Safari的复选框是偏移的，这是Chrome布局，这是Firefox布局

这是我的表单代码

<div id="container-test">
<div class="pagination">

<div class="pagination bgg"> 
<%=f.check_box :var, :style => "vertical-align: -450px; margin-left: 58px" %>
<%=f.check_box :var1, :style => "vertical-align: -430px; margin-left: 4px" %>
<%=f.check_box :var2, :style => "vertical-align: -410px; margin-left: -37px" %>
<%=f.check_box :var3, :style => "vertical-align: -430px; margin-left: -35px" %>
<%=f.check_box :var4, :style => "vertical-align: -395px; margin-left: 4px" %>
<%=f.check_box :var5, :style => "vertical-align: -370px; margin-left: 4px" %>
<%=f.check_box :var6, :style => "vertical-align: -344px; margin-left: -42px" %>
<%=f.check_box :var7, :style => "vertical-align: -370px; margin-left: -34px" %>
<%=f.check_box :var8, :style => "vertical-align: -333px; margin-left: 17px" %>
<%=f.check_box :var9, :style => "vertical-align: -303px; margin-left: 10px" %>
<%=f.check_box :var10, :style => "vertical-align: -303px; margin-left: -64px" %>
<%=f.check_box :var11, :style => "vertical-align: -273px; margin-left: 4px" %>
<%=f.check_box :var12, :style => "vertical-align: -263px; margin-left: 2px" %>
<%=f.check_box :var13, :style => "vertical-align: -244px; margin-left: 5px" %>
<%=f.check_box :var14, :style => "vertical-align: -244px; margin-left: -60px" %>
<%=f.check_box :var15, :style => "vertical-align: -222px; margin-left: 4px" %>
<%=f.check_box :var16, :style => "vertical-align: -212px; margin-left: 3px" %>
<%=f.check_box :var17, :style => "vertical-align: -194px; margin-left: 4px" %>
<%=f.check_box :var18, :style => "vertical-align: -194px; margin-left: -60px" %>
<%=f.check_box :var19, :style => "vertical-align: -170px; margin-left: 4px" %>
<%=f.check_box :var20, :style => "vertical-align: -163px; margin-left: 30px" %>
<%=f.check_box :var21, :style => "vertical-align: -132px; margin-left: -22px" %>
<%=f.check_box :var22, :style => "vertical-align: -136px; margin-left: -40px" %>
<%=f.check_box :var23, :style => "vertical-align: -160px; margin-left: -14px" %>
<%=f.check_box :var24, :style => "vertical-align: -124px; margin-left: 40px" %>
<%=f.check_box :var25, :style => "vertical-align: -96px; margin-left: -2px" %>
<%=f.check_box :var26, :style => "vertical-align: -94px; margin-left: -40px" %>
<%=f.check_box :var27, :style => "vertical-align: -112px; margin-left: -30px" %>
<%=f.check_box :var28, :style => "vertical-align: -124px; margin-left: 58px" %>
<%=f.check_box :var29, :style => "vertical-align: -90px; margin-left: 8px" %>
<%=f.check_box :var30, :style => "vertical-align: -82px; margin-left: -40px" %>
<%=f.check_box :var31, :style => "vertical-align: -100px; margin-left: -36px" %>
<%=f.check_box :var32, :style => "vertical-align: -88px; margin-left: 50px" %>
<%=f.check_box :var33, :style => "vertical-align: -118px; margin-left: 6px" %>
<%=f.check_box :var34, :style => "vertical-align: -96px; margin-left: 4px" %>
<%=f.check_box :var35, :style => "vertical-align: -80px; margin-left: -36px" %>


</div>
</div>
<% end %>

Answer 1

您正在使用 css margin和vertical-align 属性来对齐您的复选框，这是不正确的方式，因为不同的浏览器可以以不同的方式处理它（您只是遇到）。解决问题的最简单方法是在图像上使用相对位置，然后使复选框绝对定位。这将始终根据图像对齐您的复选框。您需要执行以下操作：

#some-id-of-image{
  position: relative;
}

#checkbox-1{
  position: absolute;
  left: 30px;  // change them accordingly
  top: 20px;   // change them accordingly
}

详情结帐absolute positioning inside relative positioning