Question

出于某种原因，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>

注意：

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;
}

同样的问题。 IE8和IE7不显示图像。：（

Answer 1

我不太确定你要做什么，但由于h2是一个块项目，它可能不符合你的身高/宽度CSS。我会浮动或绝对定位它。

Answer 2

编辑：这是一个有效的解决方法，请在youtr机器上测试，因为我正在使用IE8模拟器。 JSFiddle

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>

CSS


#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;
}

OLD回答

当它是一个标题元素时，你似乎正在使用<h2>。你现在应该尝试这些技巧：

在该元素上明确声明display: block;。
明确地将它们全部声明为position: relative;
将<h2>代码更改为<div>

在IE 7和IE 8中看不到任何背景图像

2 个答案: