html - IE 9 绝对定位未按预期运行 - <img> 底部位于中心

Question

我正在尝试定位一个 <img class="building">在 <div class="content-box primary"> 里面使用以下 CSS 选择器:

.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 图像时具有奇怪的缩放行为。

解决方案是在检测到任何 IE 版本时添加一个 Polyfill，以用后备 PNG 替换 SVG。