铬CSS绝对位置故障

我想制作一个由php生成的图库，其中每个图像都是灰度的，只有当鼠标移到上面时才会着色。由于各种原因，我不想使用CSS图像背景，所以我选择了绝对定位图像。当光标悬停在表格的td元素上时，绝对定位图像将弹出到灰色图像上。由于未定义坐标长度或宽度，因此rgb图像应位于灰色图像的正上方。在Firefox中确实如此，但在Chrome中，每行的第一个和第二个图像都向左移动。最后第三张图片效果很好

#main #album {
    width:100%; /* 600px */
}
#main #album  td{
    padding-bottom:20px;
    text-align:center;
}
#main #album  td img:first-child{   
    position:absolute;
    display:none;
}
#main #album  td:hover img:first-child{
    display:inline;
}
<table id="album">
<tr>
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C
</table>

#主#相册{
宽度：100%；/*600px*/
}
#主相册{
垫底：20px；
文本对齐：居中；
}
#主#专辑td img：第一个孩子{
位置：绝对位置；
显示：无；
}
#主专辑td:hover img:第一个孩子{
显示：内联；
}

A

B

C

更新

diggersworld建议的CSS重置解决了这个问题，但我也尝试使用列表，这也很有效。代码如下：

#main #albumlist {
    width:100%; 
    list-style-type:none;
}
#main #albumlist a {
    float:left;
    display:block;
    width:180px;
    height:auto;
    padding-left:20px;  
    padding-bottom:20px;
    text-align:center;
}
#main #albumlist li a:first-child{
    padding-left:0;
}
#main #albumlist a img:first-child {
    position:absolute;
    display:none;
}
#main #albumlist a:hover img:first-child {  
    display:inline;
}

<ul id="albumlist"><li>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C</a>
</li></ul>

#主#相册列表{
宽度：100%；
列表样式类型：无；
}
#主相册列表a{
浮动：左；
显示：块；
宽度：180px；
高度：自动；
左侧填充：20px；
垫底：20px；
文本对齐：居中；
}
#主专辑列表李a：第一个孩子{
左侧填充：0；
}
#主#专辑列表a img：第一个孩子{
位置：绝对位置；
显示：无；
}
#主#相册列表a:悬停img:第一个子{
显示：内联；
}

行为上的差异可以归结为许多方面。通常主要问题是浏览器默认样式之间的差异，因为它们都有一组已定义的预设。使用重置样式表可以轻松覆盖这些预设。这基本上将所有CSS属性重置为一个基本起点，并为所有浏览器提供一个基础基础。

我在评论中提到，使用表不是理想的解决方案。90年代常用于布局的表格。然而，CSS从那时起变得越来越有用，它允许开发人员用更少的HTML实现更多的功能

---

你绝对应该掌握使用列表的艺术。它们往往是我在开发网站时使用最多的元素之一。当你从语义上对列表进行分解时，你会惊讶地发现有多少东西实际上是列表。它们也比表格灵活得多，如果您深入研究响应性网页设计，您将看到巨大的好处。

快速提示：使用列表将是在相册中列出图像的更具语义的方法。表格实际上应该只用于表格数据。我们在90年代末曾经有过这样的东西，称为鼠标翻转或鼠标翻转，当你在上面移动鼠标时，使用JavaScript将一个图像替换为另一个图像。现在，如果样式被删除，您就有多余的内容，这些内容没有任何意义。使用JS风格的鼠标覆盖比以这种方式嵌入2个图像更合适。diggersworld这只是我显示的3x3表的第一行。如果我不直接改变src值，那就不能解决问题。这当然没问题，即使这样我不需要用javascript预加载图像，也不需要做任何DOM操作。@nekdolan，这没有什么区别。@diggersworld好的，我会试试看它是否有不同的行为。我对横向列表不太满意。。也许我真的根本不需要横着走…谢谢你的帮助。还尝试了列表（请参阅第一篇文章），它可以在不重置的情况下工作。如果我没有记错，绝对定位元素（如果没有设置坐标）应该定位在与未从流中移除元素时所定位的位置完全相同的位置。所以这是一个错误，即使重置解决了它。