Css chrome定位不同于firefox的元素

我的页面顶部有这些按钮，问题是chrome会在右侧显示这些按钮，并且更多的是80px。我做错了什么

这是一个按钮的样式：

#engleza1{
position: relative;
top:0px;
left: 788px;
width: 51px;
height:42px;
}
#engleza1:hover{
position: relative;
top:0px;
left: 788px;
width: 51px;
height:42px;
background:url(../images/engleza.png) no-repeat;
cursor: pointer;
}

这就是他们包装的风格：

#wrap{
width:100%;
height: 1950px;
text-align: center;
margin:0 auto;
overflow: hidden;
background:url(../ong.png) center no-repeat;
}

html:

//这里什么都没有
...

您好，您的一些代码正在重复，所以请移动它并回复此代码

#wrap{
height: 1950px;
text-align: center;
margin:0 auto;
overflow: hidden;
background:red;
}
#engleza1{
position: relative;
top:0px;
  left:788px;
width: 51px;
height:42px;
  background:yellow;
}
#engleza1:hover{
background:green;
cursor: pointer;
}

对于演示，请根据您的布局进行更改

---

您好，现在一切都好了是的，我看到在JSFIDLE上一切正常。所以我的代码有点问题，使这些div的行为像这样，不是吗？好的，我想我知道问题可能是什么。Chrome正在显示背景图像：ong.png更大。因此，在铬合金中包裹div必须更大，这就是为什么这些div放错了位置。我怎样才能解决这个问题呢？是的，但我认为最好的办法是使用一些精灵并像那样解决它。谢谢

#wrap{
height: 1950px;
text-align: center;
margin:0 auto;
overflow: hidden;
background:red;
}
#engleza1{
position: relative;
top:0px;
  left:788px;
width: 51px;
height:42px;
  background:yellow;
}
#engleza1:hover{
background:green;
cursor: pointer;
}