1

私はInkscapeを使用して、開発中のサイトに非常にシンプルなアイコンを作成しました。アイコンは、2つの並んだ要素の境界を越えて絶対的に配置されます。

Chromeでは見栄えがします:-

クロム

しかし、IE7ではそうではありません..:-

IE7

私は何か間違ったことをしていますか?私の知る限り、画像の色の部分には透明度がありません。

画像を表示するために使用しているコードは次のとおりです。-

<div class="roadmapstep">
    <div class="roadmapnumber">1</div>
    <h4>Header 1</h4>
    <div class="nextarrow"><img src="nextarrow.png"></div>
</div>

<div class="roadmapstep">
    <div class="roadmapnumber">2</div>
    <h4>Header 2</h4>
    <div class="nextarrow"><img src="nextarrow.png"></div>
</div>

画像を含むdivのCSSは次のとおりです。-

.nextarrow {
    position: absolute;
    top: 65px;
    margin-right: -35px;
    right: 0;
    width: 65px;
    height: 40px;
}

境界線のあるdivのCSS:

.roadmapstep {
    width: 220px;
    height: 150px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    position: relative;
}
4

2 に答える 2

3

z-indexを使用して画像を別の画像の上に配置する

于 2012-10-25T08:44:53.440 に答える
1

z-index:1000;に追加 .nextarrow

デモ


2 番目の div と に別のクラス名を付けてみてくださいposition:absolute。できます!!

デモ 2

于 2012-10-25T09:01:49.327 に答える