Safari中的SVG高度更大

Question

已经在site工作了很长一段时间，几乎已经完成了。我现在主要处理Safari＆amp;中的SVG问题。 Chrome（基于webkit的浏览器）。当我在主页上加载SVG时，它比Firefox和IE中的大。这使得图像（帽子人的头部）稍微被切断或隐藏，因为它显示为比在Firefox中更大的图像。 Safari截图：

Firefox截图：

我在SO上找到了this thread。他们建议使用：

svg { max-height: 100%; }

此CSS在网站上发生了变化：

.hatman {
    position: absolute;
    bottom: 15px;
    left: 50px;
    right: 30%;
}

.hatman .hatman-slide {
    height: 100%;
    max-height:100%;/*added as suggested */
    width: 100%;
}
.hatman #profile {
    position:absolute;
    left: 0px;
    }
.hatman #hat {
    opacity: 0;
}

然而这对我不起作用。 OP也没有接受答案。另一个类似的问题在SO here中描述，但也没有答案。有没有人建议如何解决这个问题？

Answer 1

最后，这更像是Webkit处理SVG大小调整的问题。

此JavaScript用于修复最大高度问题

    function TSafariFix() {

    jQuery(window).resize(function() {
    TSafariFix_Resize();
    });
    TSafariFix_Resize();
}

jQuery(document).ready(function(){
    Hatman = new THatman();
    SFix = new TSafariFix();
});