我有以下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。
提前致谢
答案 0 :(得分:1)
我终于得到了解决方案。似乎在Internet Explorer中如果使用SVG图像,则需要至少应用“宽度”。
答案 1 :(得分:0)
尝试使用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%;
}
答案 2 :(得分:0)
这是一个猜测,但如果您还为left: 0;
元素定义了right: 0;
或.arrow-down
,也许它会起作用。