【发布时间】：2019-09-24 23:14:56
【问题描述】：
我需要在 Internet Explorer 中将图像宽度的限制设置为 100%，就像其他浏览器对 max-width 所做的那样。也就是说，如果图像的宽度大于包含区域的宽度，它会缩小以适应包含区域的宽度，但如果它更小，它的大小不会改变。同样，如果图像在表格单元格 (td) 内并且比单元格大，我希望它缩放到单元格的大小，而不是扩展它。
虽然还有其他问题和答案似乎与此有关，但我无法让它们中的任何一个起作用。例如，通常建议在 Internet Explorer 中模拟 max-width：
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 实际上确实支持最大宽度百分比值，我会很高兴错了 :-)
【问题讨论】：
-
如果您提供已有的代码，您的问题更有可能得到一些答案。就目前而言，如果典型选项不起作用，则很可能存在干扰技术或其他冲突的东西。
-
您在某种意义上可能是对的，请参阅我对有效的 W3Shools 示例的编辑。但它在我自己的页面中不起作用......
-
你说的是IE6吗？较新的版本支持最大宽度。
-
不，我说的是 IE8 和 IE9，是的，我知道它应该支持它，但在我上面的示例中它不支持。并且完全相同的代码用于所有其他浏览器，它可以正常工作。
-
@AndersSvensson 您确定您的网站以标准模式显示吗？您的标记顶部应该有
<!doctype html>。
标签： internet-explorer css