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实现更多。

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

Chrome CSS绝对位置故障

1 个答案: