在Internet Explorer中设置最大宽度

7
我需要的是在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" );
}

然而,当我尝试时,结果并不如预期。在某些情况下,我会得到宽度值为-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百分比值,我会很高兴错了 :-)


2
如果您提供您已经拥有的代码,那么您的问题更有可能得到一些答案。目前情况下,如果常规选项不起作用,很可能有一些干扰技术或其他冲突。 - Shauna
1
在某种程度上,你可能是对的,请看一下我关于W3Shools示例的编辑,它可以工作。但是它在我的页面上不起作用... - Anders
你是在说IE6吗?更新的版本支持max-width。 - duri
不,我指的是IE8和IE9,是的,我知道它应该支持它,但在我上面的示例中它并没有。而且完全相同的代码用于所有其他浏览器,在那里它可以正常工作。 - Anders
它生成的文档类型是什么?即使不是HTML5,它仍然需要是IE能够理解的有效类型。 - Shauna
显示剩余3条评论
3个回答

7
IE9至少支持使用max-width百分比来调整图片大小,但是百分比是相对于图片的大小而非容器的大小。(你可以通过将100%改为70%来验证)。如果你指定inherit而不是100%,它会在IE9中按预期工作。这样做将继承容器的大小用于max-width。(我只在IE9,Firefox和Google Chrome中测试了你的示例页面,并且对于该页面,当窗口宽度变小时,图片不会保持缩放。)然而,这并不是一个完美的解决方案;在IE8浏览器模式下,以这种方式应用inherit会使表格单元格的宽度等于图片未经缩放时的宽度,尽管图片已经正确缩放。

谢谢。我还没有时间测试它,但这是一个值得检查的想法,所以我会采用这个答案。 - Anders
我现在测试了一下,不幸的是它没有起作用...我想继承不起作用是因为父元素没有设置max-width吗? - Anders
“max-width”已经在父级“td”元素上设置为500px。就目前而言,“它起作用”,因为图像被缩小到500px,这是在“td”上给出的“max-width”的大小。如果您说它不起作用,因为随着窗口宽度变小,图像不会继续缩小,请记住,在您的测试页面中,IE9和其他浏览器都不显示该行为。 - Peter O.

1

你在 td 元素内部放置 div 有什么特殊原因吗?

我认为可能有两个问题:

  1. div 元素。如果它只是用于 class 和 ID,请尝试将其移动到 td 元素中。如果无法移动,请确保将其宽度和高度属性设置为 100%。让它自动获取尺寸可能会干扰图像大小。
  2. 由于 display: table-cell; 的特性,可能会导致问题。请尝试将其显示更改为 block 或 inline-block,然后查看是否可以解决问题,然后再进行调整(注意:IE7 不支持 inline-block,但您可以在解决图像问题后再处理此问题)。

另一种选择是完全避免使用表格。您提供的代码表明您可能正在使用表格进行布局,这不是它们的用途。

此外,您使用的属性,如cellpaddingvalign,表明您参考的内容已经有些过时了。我强烈建议您学习更多当前的方法和标准。这里有一篇文章介绍cellpadding,可以帮助您入门。

抱歉,我应该解释一下:实际上我并不是自己创建这个HTML代码(天哪),而是从DITA Open Toolkit的技术文档中生成的XSLT转换。而且我对作为转换基础的XML文件几乎没有影响力。此外,我同意HTML代码中有很多过时的内容,但这也大部分不在我的掌控范围内。我所做的是定制一个预定义的XSLT转换。因此,我可以对输出进行一些更改,但要全部更改将是一项巨大的工程...但我会看看你们的建议是否有助于测试文件。谢谢。 - Anders

0
设置max-width: none解决了我的问题。
注意:在IE11上进行了测试。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接