我需要的是在Internet Explorer中将图像的宽度限制为100%,就像其他浏览器使用max-width一样。也就是说,如果图像的宽度大于包含区域的宽度,则会缩小以适合包含区域的宽度,但如果它更小,则其大小不会改变。同样,如果图像位于表格单元格(td)内且大于单元格,则希望它缩放到单元格的大小,而不是扩展它。
虽然有其他问题和答案似乎是关于这个问题,但我无法使它们中的任何一个起作用。例如,通常建议使用此解决方案来模拟Internet Explorer中的max-width:
然而,当我尝试时,结果并不如预期。在某些情况下,我会得到宽度值为-1的结果,而且在使用Firebug或类似工具检查时,根本没有显示图像。
我也不知道这个解决方案怎么可能有效。
编辑:
根据请求,这里是一些示例代码:
但是这段代码在IE浏览器中无法正常工作。也许与它被放置在表格中有关,我不确定,但是当我在W3Schools上尝试此div示例时,它可以正常工作: http://www.w3schools.com/cssref/playit.asp?filename=playcss_max-width&preval=50%25 编辑2:
完整的HTML页面示例:
这个页面显示相同的问题。图像不能缩小以适应表格单元格。在其他浏览器中,我可以调整窗口大小,图像会不断缩小。但是IE8和9不行。因此,似乎IE8和9支持max-width和max-height,但仅适用于像素值,而不适用于百分比值-即它只有部分支持......如果我正确的话,我真的很惊讶在互联网上很难找到任何关于此的信息。每个人都在谈论这些浏览器终于在IE6之后支持它......
虽然有其他问题和答案似乎是关于这个问题,但我无法使它们中的任何一个起作用。例如,通常建议使用此解决方案来模拟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" );
}
然而,当我尝试时,结果并不如预期。在某些情况下,我会得到宽度值为-1的结果,而且在使用Firebug或类似工具检查时,根本没有显示图像。
我也不知道这个解决方案怎么可能有效。
编辑:
根据请求,这里是一些示例代码:
<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>
以下是适用于除IE以外所有浏览器的简单CSS代码:
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支持max-width和max-height,但仅适用于像素值,而不适用于百分比值-即它只有部分支持......如果我正确的话,我真的很惊讶在互联网上很难找到任何关于此的信息。每个人都在谈论这些浏览器终于在IE6之后支持它......
无论如何,我已经编写了一个jQuery解决方法,但我宁愿不需要它。因此,如果有人告诉我我错了,并向我展示IE8和9实际上支持max-width百分比值,我会很高兴错了 :-)