IE 在 div 内仅显示 1 个背景图像 div答案

【问题标题】：IE showing only 1 background image div inside divIE 在 div 内仅显示 1 个背景图像 div
【发布时间】：2011-09-24 17:58:49
【问题描述】：

这是我遇到的问题：

我正在尝试使布局如图所示：

当然我更喜欢只有 div 的版本，但到目前为止我的付出都是徒劳的。我想出了一个表格和 div 的组合来使它在 Firefox 中工作，但在 IE8（可能是其他 IE 版本）中它没有显示背景图像 2 和 4。

关于如何在 IE 中进行这项工作的任何想法？

PS：没时间等 CSS3，我试过 quirks 模式，背景显示出来了，但是很多其他问题都沉浸其中。我宁愿保持“过渡”模式。

HTML：

<table id="middletable" class="bg">
<tr><td class="left" width="*">
    <table class="bg">
        <tr><td id="leftimg">&nbsp;</td></tr>
    </table>
</td>
<td width="84">
    <div class="middle">
        CONTENT
    </div>
</td>
<td class="right" width="*">
    <table class="bg">
        <tr><td id="rightimg">&nbsp;</td></tr>
    </table>
</td></tr>
</table>

CSS：

table.bg {
width: 100%;
height: 100%;
border-collapse:collapse;
}

#middletable {
background: #fff;
}

#middletable td.left {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-left-rx.jpg') repeat-x top #ff0000;
text-align: right;
vertical-align: top;
}

#middletable td.right {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-right-rx.jpg') repeat-x top #ff0;
text-align: left;
vertical-align: top;
}

#leftimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-left-nr.jpg') no-repeat top right #ccc;
}
#rightimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-right-nr.jpg') no-repeat top left #000;
}

【问题讨论】：

检查这个 jsfiddle：jsfiddle.net/CndUR（图片替换为颜色 - 如果您可以绝对链接可以帮助其他用户帮助您找到解决方案的图片）。这是布局显示的方式吗？如果此链接代表/重现您的问题。将其发布在您的问题中。然后其他 SO 用户将能够更快地为您提供帮助 =)
嗨，Dan，感谢您的帮助，我已经用真实图像更新了图像，同样适用于您推荐的 jsfiddle：jsfiddle.net/CndUR/5 问题仍然存在于 IE 中。任何帮助将不胜感激谢谢
您是否尝试过以下提供的任何解决方案？

标签： html css image html-table

【解决方案1】：

如果我理解正确，您希望正文和附近的两个图像具有固定宽度，并且两个渐变必须填充其余部分。这可能会有所帮助：http://jsfiddle.net/zxRf3/5/

【讨论】：

嗨@Laradda，谢谢你，它确实有效，但问题是我不想将#left和#right列的宽度强制为50px或smth，因为网站有为了在任何 1000px+ 宽度的屏幕上正确显示，主要内容宽度设置为 990px，左右图像为 ~300px

【解决方案2】：

看起来左右图像未显示的原因似乎是因为嵌套在td.left 和td.right 中的table.bg 没有实际高度。我知道您已将高度设置为100%，但如果没有实际内容，嵌套表就没有理由展开。

通过将height:100% 分配给#middletable td.left 和#middletable td.right，嵌套表现在可以达到为其设置的100% 的高度。您可以在这个 jsfiddle 中看到：http://jsfiddle.net/CndUR/7/ 图像现在正在显示。

我建议您考虑使用 CSS 构建布局，因为您显示的不是表格数据（或似乎不是）。

马修·泰勒（Matthew Taylor）的http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts 是一篇关于多列液体布局的精彩文章（虽然旧但仍然非常好）。

【讨论】：