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 に答える