-2

所以我有这个网站： http ://www.gameplay-universe.uphero.com/ 如果您将鼠标悬停在页脚上的社交图像上，这些图像在表格中，您会看到较小的图像发生变化更大并移动布局。如何避免/解决这个问题？无论是 CSS/HTML/JS，我只需要解决这个问题。我的代码：

<table class="social" align="center" height="40" width="40">
<tr>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/rss-inactive.png" border="0" onmouseover="this.src='/resources-backups/rss-active.png';" onmouseout="this.src='/resources-backups/rss-inactive.png';" alt="rss-feeds" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/youtube-inactive.png" border="0" onmouseover="this.src='/resources-backups/youtube-active.png';" onmouseout="this.src='/resources-backups/youtube-inactive.png';" alt="youtube" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/twitter-inactive.png" border="0" onmouseover="this.src='/resources-backups/twitter-active.png';" onmouseout="this.src='/resources-backups/twitter-inactive.png';" alt="twitter" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/facebook-inactive.png" border="0" onmouseover="this.src='/resources-backups/facebook-active.png';" onmouseout="this.src='/resources-backups/facebook-inactive.png';" alt="facebook" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/google-plus-inactive.png" border="0" onmouseover="this.src='/resources-backups/google-plus-active.png';" onmouseout="this.src='/resources-backups/google-plus-inactive.png';" alt="google-plus" />
</a>
</tr>
</table>

我也可以将代码更改为新标准（HTML5、CSS3 等）。提前致谢！

4

4 回答 4

0

将这些 css 属性设置为包含图像的元素：

Position:relative;
height:(Here put in pixels the height of your element)px;

设置高度将迫使它保持静止到该高度。

于 2013-08-30T17:12:07.153 回答
0

给你的桌子一个min-height：

更改此行：

<table class="social" align="center" height="40" width="40">

至 ：

<table style="min-height:64px;" class="social" align="center" height="40" width="40" >
于 2013-08-30T17:15:42.003 回答
0

我只是在图像上放置填充或边距，然后在悬停时删除填充/边距

于 2013-08-30T18:06:53.980 回答
-1

给z-index包含<div>图像。

于 2013-08-30T17:30:57.503 回答