我需要在 Internet Explorer 中将图像的宽度限制设置为 100%，就像其他浏览器对 max-width 所做的一样。也就是说，如果图像的宽度大于包含区域的宽度，它会缩小以适应包含区域的宽度，但如果它更小，它的大小不会改变。同样，如果图像位于表格单元格 (td) 内并且比单元格大，我希望它缩放到单元格的大小，而不是扩展它。
虽然还有其他问题和答案似乎与此有关，但我无法让其中任何一个发挥作用。例如，通常建议使用此解决方案来模拟 Internet Explorer 中的最大宽度:
http://www.svendtofte.com/code/max_width_in_ie/
本质上使用这个:
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
但是，当我尝试时，我根本没有得到预期的结果。在某些情况下，当我检查 Firebug 或类似程序时，我得到的宽度值为 -1 并且根本没有显示图像。
而且我也不知道该解决方案如何工作。
编辑:
根据要求，这里是一些示例代码:
<table cellpadding="4" cellspacing="0"
summary="" id="Push12Matt__simpletable_rph_vch_32" border="0" class="simpletable">
<tr class="strow">
<td valign="top" class="stentry" width="50%">
<div class="fig fignone" id="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><a
name="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><!-- --></a><p class="figcap"
>Bild 1. Uponor Push 12</p>
<a name="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"><!-- --></a><img
class="image" id="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"
src="/handbok/images/Push12/Push12_byggmatt.jpg" />
</div>
</td>
<td valign="top" class="stentry" width="50%">
<div class="fig fignone" id="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><a
name="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><!-- --></a><p class="figcap"
>Bild 2. Uponor ElPush 12</p>
<a name="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"><!-- --></a><img
class="image" id="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"
src="/handbok/images/Push12/Push12Electronic_byggmatt.jpg" />
</div>
</td>
</tr>
</table>
和简单的 css(适用于除 IE 之外的所有浏览器):
img
{
max-width : 100%;
max-height : 100%;
}
但它不适用于 IE 中的这段代码。也许这与它放在表格中的事实有关，我不知道，但是当我在 W3Schools 上尝试这个 div 示例时，它工作正常: http://www.w3schools.com/cssref/playit.asp?filename=playcss_max-width&preval=50%25
编辑 2:
示例完整的 HTML 页面:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv-se" xml:lang="sv-se">
<head>
<title>Image test</title>
<style type="text/css">
body {
max-height : 100%;
max-width : 100%;
width : 500px;
}
img {
max-height : 100%;
max-width : 100%;
width : auto;
height : auto;
}
td
{
max-height : 100%;
max-width : 500px;
display : block;
}</style>
</head>
<body id="frontpage">
<h1 class="title topictitle1">Image test</h1>
<div class="body conbody">
<table>
<tbody>
<tr>
<td>
<img src="Push12_byggmatt.jpg" />
</td>
<td>
<img src="Push12Electronic_byggmatt.jpg" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这个页面显示了同样的问题。图像不会缩小以适合表格单元格。在其他浏览器中，我可以随心所欲地调整窗口大小，而图像只会不断缩小。 IE8 和 9 没有。所以看起来 IE8 和 9 支持最大宽度和最大高度，但只支持像素值，不支持百分比值——也就是说，它只支持部分……如果我是对的，我真的很惊讶它这么难在 Internet 上查找有关此的任何信息。每个人都在谈论这些浏览器在 IE6 没有之后终于支持它......
无论如何，我已经编写了一个 jQuery 解决方法，但我宁愿不需要它。所以，如果有人能告诉我我错了，并告诉我 IE8 和 9 实际上支持最大宽度百分比值，我很乐意错了:-)
最佳答案
至少 IE9 确实支持图像的 max-width 百分比，但百分比是相对于图像的大小，而不是容器的 大小。 (您可以通过将 100% 更改为例如 70% 来看到这一点。)它会按预期工作，但是，如果您指定 inherit 而不是 100%。这样做将继承 IE9 中 max-width 的容器大小。 (我只在 IE9、Firefox 和 Google Chrome 中测试过您的示例页面，对于该页面来说，图像将随着窗口宽度变小而不断缩小是不正确的。)然而，这不是一个完美的解决方案；在 IE8 浏览器模式下，以这种方式应用 inherit 将使表格单元格的宽度等于图像的未缩放宽度，即使图像已正确缩小也是如此。
关于internet-explorer - 在 Internet Explorer 中设置最大宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8645087/