google-chrome - Safari 中的 SVG 高度更大

Question

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

火狐截图：

我在 SO 上找到了这个帖子。他们建议使用：

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();
});