1

由于某种原因，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 不显示图像。:(

4

2 回答 2

0

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

于 2013-07-30T23:50:06.390 回答
0

编辑：这是一个可行的解决方法，由于我使用的是 IE8 模拟器，请在 youtr 机器上进行测试。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;
}

下面的旧答案

当它是标题元素时，您似乎正在<h2>像块一样使用它。您现在应该尝试以下提示：

  1. display: block;在该元素上显式声明。
  2. 明确地将它们全部声明为position: relative;
  3. <h2>将标签更改为<div>
于 2013-07-30T23:54:45.203 回答