rails css引导对齐多个表单复选框

我正在尝试制作一个rails表单，并在一个图像上对齐多个复选框，当我使用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 %>

“垂直对齐：-450px；左边距：58px”%>
“垂直对齐：-430px；左边距：4px”%>
“垂直对齐：-410px；左边距：-37px”%>
“垂直对齐：-430px；左边距：-35px”%>
“垂直对齐：-395px；左边距：4px”%>
“垂直对齐：-370px；左边距：4px”%>
“垂直对齐：-344px；左边距：-42px”%>
“垂直对齐：-370px；左边距：-34px”%>
“垂直对齐：-333px；左边距：17px”%>
“垂直对齐：-303px；左边距：10px”%>
“垂直对齐：-303px；左边距：-64px”%>
“垂直对齐：-273px；左边距：4px”%>
“垂直对齐：-263px；左边距：2px”%>
“垂直对齐：-244px；左边距：5px”%>
“垂直对齐：-244px；左边距：-60px”%>
“垂直对齐：-222px；左边距：4px”%>
“垂直对齐：-212px；左边距：3px”%>
“垂直对齐：-194px；左边距：4px”%>
“垂直对齐：-194px；左边距：-60px”%>
“垂直对齐：-170px；左边距：4px”%>
“垂直对齐：-163px；左边距：30px”%>
“垂直对齐：-132px；左边距：-22px”%>
“垂直对齐：-136px；左边距：-40px”%>
“垂直对齐：-160px；左边距：-14px”%>
“垂直对齐：-124px；左边距：40px”%>
“垂直对齐：-96px；左边距：-2px”%>
“垂直对齐：-94px；左边距：-40px”%>
“垂直对齐：-112px；左边距：-30px”%>
“垂直对齐：-124px；左边距：58px”%>
“垂直对齐：-90px；左边距：8px”%>
“垂直对齐：-82px；左边距：-40px”%>
“垂直对齐：-100px；左边距：-36px”%>
“垂直对齐：-88px；左边距：50px”%>
“垂直对齐：-118px；左边距：6px”%>
“垂直对齐：-96px；左边距：4px”%>
“垂直对齐：-80px；左边距：-36px”%>

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

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

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

---

有关详细信息，请与我们分享工作链接。。为浏览器添加UAD重置样式，或尝试指定固定宽度并与复选框左对齐