IE11忽略底部0;

Question

我有以下html元素：

<header id="w-header">
    <div> ... </div> 
    <img class="arrow-down" src="arrow.svg"> 
</header>

使用这种样式：

#w-header {
    height: 650px;
    background-position-y: -10px;
}

#w-header .container {
    padding-right: 20px;
    padding-left: 20px;
    bottom: 76px;
    position: absolute;
    width: 100%;
}

.arrow-down {
    position: absolute;
    bottom: 0;
    margin: 1px -2px -1px;
}

我无法理解为什么我的'.arrow-down'元素（svg白色形状）不在底部0位置。

这是一个截图：

它在其他主流浏览器中都很完美，甚至是Microsoft Edge。

提前致谢

Answer 1

我终于得到了解决方案。似乎在Internet Explorer中如果使用SVG图像，则需要至少应用“宽度”。

Answer 2

尝试使用margin-bottom而不是bottom和相对于外部容器的位置。

#w-header {
height: 650px;
background-position-y: -10px;
position:relative
}
#w-header .container {
padding-right: 20px;
padding-left: 20px;
margin-bottom: 76px;
position: absolute;
width: 100%;
}

Answer 3

这是一个猜测，但如果您还为left: 0;元素定义了right: 0;或.arrow-down，也许它会起作用。