Question

我很熟悉IE在不使用display: block时在SVG上方和下方添加空间的问题，因为它将SVG视为内联元素。

但我正在使用display: block;并获得相同的结果。为什么呢？

＆＃13;

svg {
  width: 100%;
  display: block;
}
.svgContainer {
  width: 25%;
}

＆＃13;

<div class="svgContainer">
  <a id="one">
    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
      <rect x="20" y="20" width="1546.9" height="210" />
      <g class="iconTextLayer">
        <path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
        <path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
        <path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
        />
      </g>
      <g>
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
      </g>
    </svg>


  </a>
</div>
<div class="svgContainer">
  <a id="two">

    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
      <rect x="20" y="20" width="1546.9" height="210" />
      <g class="iconTextLayer">
        <path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
        <path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
        <path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
        />
      </g>
      <g>
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
      </g>
    </svg>

  </a>
</div>
<div class="svgContainer">
  <a id="three">

    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
      <rect x="20" y="20" width="1546.9" height="210" />
      <g class="iconTextLayer">
        <path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
        <path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
        <path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
        />
      </g>
      <g>
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
      </g>
    </svg>
  </a>
</div>

＆＃13;

Answer 1

我以一种hackish的方式解决了它，但是认为会有一个简单的CSS修复。

在所有CSS和脚本加载之后，我取svg元素的宽度，这是已知的并且基于原始svg的宽高比，我使用jquery来指定高度$（“＃svgElementToBeAssignedHeight”） .css（“height”，渲染的svg元素的宽度*（原始svg视图的高度/原始svg视图的宽度）

尽管使用＆＃34; display：block＆＃34;

1 个答案: