0

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

1 回答 1

0

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

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

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

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

于 2013-01-11T21:37:35.140 回答