issue标度问题

Question

在这个网站上，.logo-bar容器中有四个svg标志。它们中的每一个都放在一个图像标记中，如下所示：

<div class="logo-bar">
    <p class="logo">
        <a href=""><img src="resources/img/miterassa_logo.svg" alt=""></a>
    </p>

viewBox设置在每个svg文件的内部：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="339.827px" height="84.337px" viewBox="0 0 339.827 84.337" enable-background="new 0 0 339.827 84.337" xml:space="preserve">

Windows7和Windows8.1上的IE11似乎没有正确地缩放svg。

每隔一段时间，在页面的初始加载或刷新之后，只有一些徽标被不正确地缩放。

我试着用小提琴重复这个问题，但问题始终没有出现。

Answer 1

从web标准的角度来看，使用svg是非常好的，并且应该工作得很好(如果没有，您应该提交一个IE bugreport )。您是否尝试过在css中设置元素的大小并从svg根元素中移除宽度和高度属性？

应用于logo-class及其子程序的样式也可能影响结果。

Answer 2

您需要使用CSS设置SVG的高度和宽度。我建议使用以下方法将浏览器和版本添加到主体标记类中：

// Loop through each of the available browsers
jQuery.each(jQuery.browser, function(i, val) {  
if(val != true){
// Render the browser type
        $(document.body).addClass("v"+parseInt(val));
    }
// Render the browser version
    else{
        $(document.body).addClass(i);
    }   
});

然后添加以下CSS：

.msie.v9 svg, .msie.v10 svg {
  width: 100%; 
  height:600px; // Add your own height here
}