4

所以我有一个只有两列和一行的表。第二个 td 保存图像，第一个保存文本。我希望包含图像的 td 尽可能在内部具有该图像的最小尺寸，并且第一个 td 填充剩余空间。以下适用于除 IE7 之外的所有浏览器（我们不使用 IE6）：

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

发生的情况是：页面正确呈现，然后当您将鼠标悬停在表格上时，第一个 td 扩展以填充整个表格，将图像推离边缘。

我可以用一些 jQuery 来解决这个问题，以测量图像的宽度并计算第一个 td 的余数；但这个解决方案充满了 LAME！

请帮忙。我不明白为什么 IE7 觉得有必要重新绘制它的方式。

4

5 回答 5

2

请尝试以下代码。不要显式声明太多宽度，而是尝试显式声明太少（因为无论如何图像都会将宽度推到 1% 以上。）

我在没有实际查看 IE7 的情况下将其写在脑海中，但是我在家里的虚拟机中有 IE7，所以如果我找到不同的解决方案，我会在稍后发表评论。

<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
于 2011-07-29T20:41:52.773 回答
1

您可以尝试以下几件事：

  1. 确保您使用 reset.css 样式表来重置所有浏览器默认设置并适应任何浏览器怪癖。这对于 Internet Explorer 尤其重要。
  2. 只对表格数据使用表格——我不确定表格的其余部分包含什么，但除非会有数据行，否则使用div带有 ap和img浮动的容器会容易得多。
  3. 在 .上设置宽度和高度img。
  4. 使用 CSSposition: relative; float: left;查看它是否有助于解决悬停时的定位问题。我发现 jQuery 脚本和 CSS3 PIE 之类的浏览器 hack 经常出现悬停问题 - 如果您正在使用这些，请尝试删除它们。
于 2011-06-21T23:07:43.520 回答
1

尝试style="zoom:1"在元素上设置。

于 2011-07-31T02:06:13.427 回答
0

我不确定，但看着

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

据我所见，这上面没有表格宽度，所以 IE 不知道如何适当地缩放 td。

另一个猜测是因为您将第一个宽度声明为 100%，IE 将其解释为将其推开。这是我的猜测，你不能在第一个单元格上设置 100% 的宽度，因为这意味着占据整个表格宽度的 100%。

于 2011-08-02T16:18:04.520 回答
0

清除浏览器缓存，在图像上指定宽度和高度

我在 ie7 上看到过最奇怪的东西，比如分页符 \n 等导致这种效果，即：

<a href="#>
<img src="jpg" />
</a>

修复只需将所有内容放在同一行且没有空格（例如右侧有空格的表格）

也避免使用内联样式，使用样式表（css）

于 2011-08-02T16:31:59.473 回答