Chrome CSS绝对位置故障

Question

我想制作一个由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>

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>

Answer 1

行为上的差异可以归结为许多事情。通常主要的问题是浏览器默认样式之间的差异，因为它们都有一组预定义的样式。通过使用重置样式表可以很容易地覆盖这些预设。这基本上重置了所有CSS属性到一个基本起点，并为所有浏览器提供了一个级别基础。

http://meyerweb.com/eric/tools/css/reset/

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

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