具有宽度的图像：表格单元格中的 100% 在 IE 中无法正确缩放答案

【问题标题】：images with width: 100% in table cells don't scale right in IE具有宽度的图像：表格单元格中的 100% 在 IE 中无法正确缩放
【发布时间】：2012-04-25 04:44:18
【问题描述】：

我有一个包含图像的 3 列表。所有 td 都有width="33%"，包含的图像有 CSS width:100%。在 FF 和 Opera 中，图像按我想要的方式缩放，即填充单元格的整个宽度，保持它们的纵横比。但是，在 IE7 中，它们的行为完全不同：我认为宽度最大的图片会拉伸整个列，而较小的图片会拉伸到新的可用宽度。

有问题的页面是：http://mybgagent.com/print.php?offers_id=4515
（我知道网站一团糟，我没有编码）

有什么建议吗？设置 css position:absolute 可以使图像在 IE 中正确缩放，但会破坏 Opera 和 FF 中的缩放，以及在所有浏览器中的定位。

【问题讨论】：

让浏览器缩放任何图片都不是一个好主意。有些浏览器在这方面确实做得不好（质量）。我宁愿保留图片的原始尺寸。

标签： html css internet-explorer

【解决方案1】：

我在 IE7“兼容”模式下经常遇到这个问题。简单的解决方法是不仅要放

width: 100%;

在我的 css 中，还有

width: 100%;
float: left;

立即清除了那个讨厌的打嗝。

【讨论】：

你在什么元素上放置了浮动：左和宽度：100%？

【解决方案2】：

听起来您对每个浏览器都有一个解决方案，但没有办法针对它，那么CSS Browser Selector 可以帮助您解决这个问题！只需将此 jQuery 插入您的站点（在 <head> 部分），然后为 IE 和实际浏览器编写单独的规则，并在您的 IE 选择器之前附加 .ie :)

效果很好，我一直都在用！

例子：

myTd
{
   background: #f00; /*whatever your rules are*/
}

.ie .myTdv
{
   position: absolute;
}

就是这样！

【讨论】：

谢谢，会的。但是，我仍在寻找 IE 的解决方案。而且，r 不是十六进制数字：P
一年后回顾这一点，我现在已经足够了解这只是 IE 的另一个错误和奇怪之处，应该避免或使用您的建议设计一个复杂的解决方法。我是个懒惰的混蛋，我选择了第一个选项。

【解决方案3】：

尝试将父单元格的样式设置为position:relative。

【讨论】：

试过了，然后也为图像添加了位置：绝对。没用。