图像不适合表格，IE 中的 td（IE8，IE9），在 FF 中效果很好答案

【问题标题】：Image not fitting to table, td in IE(IE8,IE9), works well in FF图像不适合表格，IE 中的 td（IE8，IE9），在 FF 中效果很好
【发布时间】：2014-05-01 16:49:09
【问题描述】：

您能帮我把图像拟合到桌子上吗，td 高度。每当表格展开时，图像似乎都保持其原始大小，并且不适合表格的宽度和高度。问题发生在 IE8、IE9 中。它似乎在 Firefox 中运行良好。请在下面找到html和css：

HTML：

<table cellspacing="0" cellpadding="0" class="special-offer-banner">
        <tbody><tr>
            <td width="100%" height="100%" class="special-offer-image">
                <img width="100%" height="100%" alt="BOGO &amp; more!" src="/wcsstore/BonTon/images/bonton/gateway_bogo_web.jpg">
            </td>
            <td class="special-offer-messages">
                <p class="message-container">
                    <span class="strong spo-offer-msg1">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span><br>
                    <span class="spo-offer-msg2">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span>
                </p>
            </td>
            <td class="more-special-offers">
            </td>
        </tr>
    </tbody>
</table>

CSS：

.special-offer-banner {
border: 2px solid #333333;
width: 100%;
height: 120px;
margin: 5px 0;
display: table;
table-layout: fixed;
}

.special-offer-banner .special-offer-image {
width: 340px;
}

.special-offer-banner .special-offer-image img {
display: block;
}

【问题讨论】：

标签： css internet-explorer-8 internet-explorer-9

【解决方案1】：

在 html5 中，img 标签的 width 和 height 属性不能是 %。我会尝试添加一个 CSS 规则来使图像的宽度/高度为 100%。

.special-offer-banner .special-offer-image img {
   display: block;
   width:100%; 
   height:100%; 
}

【讨论】：

感谢您的快速回复。我按照您的建议进行了更改，但它似乎在 IE 中不起作用。图像的顶部和下方仍然存在空白。 FF 虽然工作正常。