CSS图像最大宽度不适用于Firefox / IE

Question

这是一个JsFiddle。

HTML：

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
<div data-role="page" >
    <div id="contentwrap">
        <div id="content" data-role="content">
             <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />

          asdad asd asd asd   sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
        </div>
    </div>
</div>

CSS：

html, body {
height: 100%;
}

#contentwrap {
display: table;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}

#contentwrap img {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 10px;

max-width:100%;
}

#content {
height: 100%;
display: table-cell;
text-align:center;
vertical-align:middle;
}

如您所见，如果您对其进行测试，则“最大宽度：100％”属性仅适用于Google Chrome浏览器。使用Firefox和IE，图像宽度保持不变...使用Chrome，图像适应窗口...：

我该如何解决？（至少使用IE11）

我发现了其他具有相同问题的帖子，但没有一个给出好的解决方案...

Answer 1

实际上，有一个非常简单的解决方案-您需要在设置为的元素上将table-layout属性fixed设置为display: table。

#contentwrap {
    display: table;
    table-layout: fixed;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}