PNG和css边界问题

我用Inkscape在我正在开发的网站上创建了一个非常简单的图标。图标绝对位于两个并排元素的边界上

在Chrome中，它看起来很棒：-

但在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：

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

---

用于将图像定位在另一图像上方

用于将图像定位在另一图像上方

添加

z-index:1000至
.nextarrow



尝试为第二个div和
position:absolute
指定不同的类名。它起作用了

添加
z-index:1000至
.nextarrow



尝试为第二个div和
position:absolute
指定不同的类名。它起作用了

尝试添加CSS
z-index:1000到带边框的元素和
z索引：1001到箭头；请发布你的HTML和CSS，或者更好：设置一个测试，让别人测试你的代码。对于这一点，IE中的
z-index
似乎出了问题。尝试添加CSS
z-index:1000到带边框的元素和
z索引：1001到箭头；请发布你的HTML和CSS，或者更好：设置一个测试，让别人测试你的代码。对于这一点，IE中的
z-index
似乎出了问题。如果给箭头的z-index属性一个比边框更高的值，它应该可以工作。我会看一下你的代码我已经为有边框的div添加了css。我尝试过不同的z索引，但都不起作用。Chrome和Firefox操作完美，只是不是IE7。看起来你的边框和箭头使用相同的CSS类？给箭头另一个类，并给它一个比它们没有的边界更高的z索引值。。包含边框的div具有类“Roadmap Step”，而包含图像的div具有类“nextarrow”…啊，我现在明白了，对不起。我认为三十点回答了你的问题，如果你给箭头的z-index属性一个比边框高的值，它应该会起作用。我会看一下你的代码我已经为有边框的div添加了css。我尝试过不同的z索引，但都不起作用。Chrome和Firefox操作完美，只是不是IE7。看起来你的边框和箭头使用相同的CSS类？给箭头另一个类，并给它一个比它们没有的边界更高的z索引值。。包含边框的div具有类“Roadmap Step”，而包含图像的div具有类“nextarrow”…啊，我现在明白了，对不起。我想三十点回答了你的问题，最后终于成功了。非常感谢。但仍然不明白为什么使用原始代码它不起作用……这是因为IE7不支持带位置的z-index:relativeFinally让它起作用。非常感谢。仍然不明白为什么它不能使用原始代码…这是因为IE7不支持带position:relative的z-index
.roadmapstep {
    width: 220px;
    height: 150px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    position: relative;
}