Html Can'；在IE 7和IE 8中看不到任何背景图像

由于某些原因，iE8和IE7的行为与其他浏览器不同，并且相对位置元素背景图像不会出现

有什么建议吗

HTML

<div id="container1">
    <div class="main-column">
         <h2>Hello tittle 1</h2>

        <div class="text-column">
            <p>I'm on column 1 and I like it</p>
            <p>I'm on column 1 as well</p>
        </div>
    </div>
    <div class="main-column">
         <h2>Hello tittle 2</h2>

        <div class="text-column">
            <p>I'm on column 2 and I like it</p>
            <p>I'm on column 2 as well</p>
        </div>
    </div>
    <div class="main-column">
         <h2>Hello tittle 3</h2>

        <div class="text-column">
            <p>I'm on column 3 and I like it</p>
            <p>I'm on column 3 as well</p>
        </div>
    </div>
</div>

你好Title 1
我在第一栏，我喜欢它

我也在第一栏

你好Title 2
我在第二栏，我喜欢它

我也在第二栏

你好Title 3
我在第三栏，我喜欢它

我也在第三栏

注:

a） 绝对位置而不是相对位置将破坏所有布局

b） 我的背景声明上有一个空格，所以这不是一个空格问题

试试我：

相同的标记，但现在具有绝对位置：

#container1 {
    background-color: red;
    text-align: center;
}

.main-column {
    display: inline-block;
}

.main-column h2 {
    width: 220px;
    height: 235px;
    padding-top: 110px;
    position: absolute; /* <<-- Changed */
    background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;
    margin: 0 auto;
}

.text-column {
    width: 220px; /* <<-- Make it equal to the h2 */
    height: 300px;
    background-color: yellow;
    margin: 120px auto 0 auto;
    padding-top: 270px; /* <<-- Adjust */
}

.text-column p {
    padding: 0 50px;
}

#容器1{
背景色：红色；
文本对齐：居中；
}
.主栏{
显示：内联块；
}
.主柱h2{
宽度：220px；
高度：235px；
填充顶部：110px；
位置：绝对；/*我不太确定您想要做什么，但由于h2是一个块项目，它可能不符合您的高度/宽度CSS。我将浮动或绝对定位它。
编辑：这里有一个工作方法，请在您的机器上测试它，因为我使用的是IE8 emulator

HTML

 <div id="container1">
                <div class="main-column">
                    <div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
                    <div class="text-column">
                        <p>I'm on column 1 and I like it</p>
                        <p>I'm on column 1 as well</p>
                    </div>
                </div><br>
                <div class="main-column">
                     <div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
                    <div class="text-column">
                        <p>I'm on column 1 and I like it</p>
                        <p>I'm on column 1 as well</p>
                    </div>
                </div><br>
                <div class="main-column">
                     <div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
                    <div class="text-column">
                        <p>I'm on column 1 and I like it</p>
                        <p>I'm on column 1 as well</p>
                    </div>                </div>
            </div>

下面是老答案

当它是一个标题元素时，您似乎正在像使用块一样使用
。您现在应该尝试以下技巧：

在该元素上显式声明
display:block；
显式地将它们全部声明为
position:relative；
将
标记更改为

总之，您指的是什么元素？显示块不会改变任何内容：（全部试试。仍然没有图像出现。试试这个提琴，我认为它会起作用，因为它是一个解决办法。所有这些都不起作用。我最终使用了完全不同的东西。我还发现我不能依赖IE8和IE7在虚拟盒上渲染，主要是因为缓存问题。无论如何，感谢你花时间在这方面。给了你+1。据我所知：我不能绝对定位此元素，否则，所有布局都会崩溃。我不应该将其浮动，因为我需要它居中，即使它保持居中，也可能会迫使我浮动其他元素，以便它们不会松开流。我无法生成内联块，因为IE7不会理解。我希望此代码看起来像cer在好的浏览器上，IE8和IE7的外观非常相似。图像的大小是否更大？事实上，这是可行的。由于一些非常奇怪的原因，远程绝对路径没有显示图像，当我将背景声明更改为相对路径时，图像确实出现了。我暂时不谈了。谢谢。

#container1 {
    background-color: red;
    text-align: center;
}

.main-column {
    display: inline-block;
}

.main-column .h2 {
    width: 220px;
    height: 244px;
    padding-top: 110px;
    position: relative;
    /*background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;*/
}
.main-column .h2 span{
    z-index: 2;
    position: absolute;
    text-align: center;
    line-height: 243px;
    margin-top: -110px;
    left: 0;
    width:100%;
    font-weight: bold;
    font-size: large;
}

.main-column .h2  img {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: 0;
}

.text-column {
    width: 220px;
    height: 300px;
    background-color: yellow;
    margin: -223px auto 0 auto;
    padding-top: 220px;
}

.text-column p {
    padding: 0 50px;
}