IE 9绝对定位不符合预期 - <img/>底部位于中心位置

Question

我尝试使用以下CSS选择器将<img class="building">置于<div class="content-box primary">内：

.content-box.primary{
    position: relative;
    width: 100%;
    height: 800px;
}
.building{
    position: absolute;
    bottom: 19px;
    left: 50%;
    z-index: 15;
    max-width: 1000px;
    height: auto;
    transform: translateX(-50%);
}

以下是对HTML结构的澄清：

<div class="content-box primary">
    <img class="building">
</div>

请注意，转换实际上是一个LESS Mixin，用于正确的浏览器前缀，所以据我所知这不是问题所在。

This is how it is expected to look.

This is how it looks in IE9.

我会发布图片但我目前没有足够的积分。

有谁知道为什么IE9会这样做？

Answer 1

所以问题似乎是图像是一个SVG，IE9在SVG图像方面有奇怪的缩放行为。

解决方案是添加Polyfill，如果检测到任何IE版本，则用后备PNG替换SVG。