html - 为什么内联 block svgs 在 Edge 浏览器中重叠,在 IE11 中显示很小,高度以像素为单位,宽度为自动?

标签 html css internet-explorer svg microsoft-edge

我有两个 svg,我想在一行中显示。我已将它们设置为 inline-block。它们具有给定的像素高度,宽度设置为 auto。它们在除 Edge 和 IE11 之外的所有浏览器中都能正确呈现。在 Edge 中,svgs 重叠,而在 IE11 中,它们不考虑应用的高度。因为我不能添加超过 3000 行,所以我用 jquery 添加了两个 svg。没有 jquery(jsfiddle demo) 也存在同样的错误。

演示:

$(".marquee-content").clone().appendTo($(".marquee-wrapper"));
body {
  padding: 100px;
}

.marquee-vertical {
  height: 200px;
}

.marquee-content {
  margin: 0;
  padding: 30px;
}

.marquee {
  overflow: scroll;
  margin: 15px 0;
}

.marquee-horizontal {
  white-space: nowrap;
  width: 300px;
}

.marquee-horizontal .marquee-content,
.marquee-horizontal .marquee-wrapper {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="marquee marquee-horizontal">
    <div class="marquee-wrapper">
      <div class="marquee-content">
        <svg style="height: 26px; width: auto;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" xml:space="preserve">
          <style type="text/css">
            .st0 {
              fill: none;
            }
            
            .st1 {
              enable-background: new;
            }
            
            .st2 {
              fill: #009444;
            }

          </style>
          <rect y="2.3" class="st0" width="526.6" height="26"></rect>
          <g class="st1">
            <path class="st2" d="M7.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L10,9.8C9.6,9.6,9.1,9.5,8.6,9.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5c0,1.6,0.3,2.8,1,3.6
s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C9.6,20.6,8.5,20.8,7.2,20.8z"></path>
            <path class="st2" d="M24.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S24.6,12.1,24.6,14.1z M14.8,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S14.8,12.5,14.8,14.1z"></path>
            <path class="st2" d="M36.8,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7H28V7.7h1.6
l0.3,1.8H30c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H36.8z"></path>
            <path class="st2" d="M46.9,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2H41V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S46.2,19.2,46.9,19.2z"></path>
            <path class="st2" d="M59.1,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5C52.3,8.3,53,8,53.7,7.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H59.1z M54.7,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S53.9,19.2,54.7,19.2z"></path>
            <path class="st2" d="M69.7,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5l-0.6,1.7c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C72.1,20.6,71,20.8,69.7,20.8z"></path>
            <path class="st2" d="M80.1,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7H78v3h3.7v1.5H78v7.6c0,0.8,0.2,1.4,0.6,1.8S79.5,19.2,80.1,19.2z"></path>
            <path class="st2" d="M95.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3s-0.7-2.2-0.7-3.5
c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S95.5,12.1,95.5,14.1z M85.7,14.1c0,1.6,0.3,2.9,1,3.8
s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3S85.7,12.5,85.7,14.1z"></path>
            <path class="st2" d="M107.7,24.3H96.8v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M118.5,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H118.5z"></path>
            <path class="st2" d="M135.5,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S135.5,12.1,135.5,14.1z M125.7,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S125.7,12.5,125.7,14.1z"></path>
            <path class="st2" d="M147.7,24.3h-10.9v-1.5h10.9V24.3z"></path>
            <path class="st2" d="M158,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8L157,9.9c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S158,16.2,158,17.1z"></path>
            <path class="st2" d="M167.1,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3h-1.9V7.7h1.6l0.3,1.8
h0.1c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S168.8,20.8,167.1,20.8z
M166.8,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S168,9.1,166.8,9.1z"></path>
            <path class="st2" d="M183.7,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H183.7z M179.3,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S178.6,19.2,179.3,19.2z"></path>
            <path class="st2" d="M205.5,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7h-1.9V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H205.5z"></path>
            <path class="st2" d="M220.9,10l-0.8,4h3.3v1.5h-3.6l-1,5h-1.6l1-5h-3.6l-1,5h-1.6l0.9-5H210V14h3.4l0.8-4h-3.2V8.5h3.5l1-5.1h1.6
l-1,5.1h3.6l1-5.1h1.6l-1,5.1h3.1V10H220.9z M215,14h3.6l0.8-4h-3.6L215,14z"></path>
            <path class="st2" d="M229.8,20.6l-4.9-12.8h2.1l2.8,7.6c0.6,1.8,1,2.9,1.1,3.5h0.1c0.1-0.4,0.4-1.3,0.8-2.6s1.5-4.1,3.1-8.5h2.1
l-4.9,12.8H229.8z"></path>
            <path class="st2" d="M244.5,20.8c-1.9,0-3.4-0.6-4.5-1.7s-1.6-2.8-1.6-4.8c0-2.1,0.5-3.7,1.5-4.9s2.4-1.8,4.1-1.8
c1.6,0,2.9,0.5,3.8,1.6s1.4,2.5,1.4,4.2v1.2h-8.8c0,1.5,0.4,2.7,1.1,3.4s1.7,1.2,3.1,1.2c1.4,0,2.8-0.3,4.1-0.9V20
c-0.7,0.3-1.3,0.5-2,0.6S245.3,20.8,244.5,20.8z M243.9,9.1c-1,0-1.9,0.3-2.5,1s-1,1.6-1.1,2.8h6.7c0-1.2-0.3-2.2-0.8-2.8
S244.9,9.1,243.9,9.1z"></path>
            <path class="st2" d="M261.3,20.6v-8.3c0-1-0.2-1.8-0.7-2.3s-1.2-0.8-2.2-0.8c-1.3,0-2.3,0.4-3,1.1s-0.9,1.9-0.9,3.6v6.7h-1.9V7.7
h1.6l0.3,1.8h0.1c0.4-0.6,1-1.1,1.7-1.5s1.5-0.5,2.4-0.5c1.5,0,2.7,0.4,3.5,1.1s1.2,1.9,1.2,3.6v8.4H261.3z"></path>
            <path class="st2" d="M271.4,19.2c0.3,0,0.7,0,1-0.1s0.6-0.1,0.8-0.2v1.5c-0.2,0.1-0.5,0.2-0.9,0.3s-0.8,0.1-1.1,0.1
c-2.5,0-3.7-1.3-3.7-3.9V9.2h-1.8V8.3l1.8-0.8l0.8-2.7h1.1v3h3.7v1.5h-3.7v7.6c0,0.8,0.2,1.4,0.6,1.8S270.7,19.2,271.4,19.2z"></path>
            <path class="st2" d="M283.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H283.6z M279.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S278.4,19.2,279.2,19.2z"></path>
            <path class="st2" d="M295,20.8c-0.8,0-1.6-0.2-2.3-0.5s-1.3-0.8-1.7-1.4h-0.1c0.1,0.8,0.1,1.5,0.1,2.1v5.3H289V7.7h1.6l0.3,1.8h0.1
c0.5-0.7,1.1-1.2,1.7-1.5s1.4-0.5,2.3-0.5c1.7,0,3,0.6,3.9,1.7s1.4,2.8,1.4,4.9c0,2.1-0.5,3.7-1.4,4.9S296.7,20.8,295,20.8z
M294.7,9.1c-1.3,0-2.3,0.4-2.8,1.1s-0.9,1.9-0.9,3.5v0.4c0,1.8,0.3,3.1,0.9,3.9s1.6,1.2,2.9,1.2c1.1,0,2-0.4,2.6-1.3
s0.9-2.1,0.9-3.7c0-1.6-0.3-2.8-0.9-3.7S295.9,9.1,294.7,9.1z"></path>
            <path class="st2" d="M303.6,4.2c0-0.4,0.1-0.8,0.3-1s0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,1s-0.1,0.8-0.3,1
s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3S303.6,4.7,303.6,4.2z M305.7,20.6h-1.9V7.7h1.9V20.6z"></path>
            <path class="st2" d="M318.1,17.1c0,1.2-0.4,2.1-1.3,2.8s-2.1,1-3.8,1c-1.7,0-3-0.3-4-0.8v-1.8c0.6,0.3,1.3,0.6,2,0.7s1.4,0.3,2,0.3
c1,0,1.8-0.2,2.3-0.5s0.8-0.8,0.8-1.5c0-0.5-0.2-0.9-0.7-1.3s-1.3-0.8-2.5-1.3c-1.2-0.4-2-0.8-2.5-1.2s-0.9-0.7-1.1-1.1
s-0.4-0.9-0.4-1.5c0-1,0.4-1.9,1.3-2.5s2-0.9,3.5-0.9c1.4,0,2.7,0.3,4.1,0.8l-0.7,1.6c-1.3-0.5-2.5-0.8-3.5-0.8
c-0.9,0-1.6,0.1-2.1,0.4s-0.7,0.7-0.7,1.2c0,0.3,0.1,0.6,0.3,0.9s0.5,0.5,0.8,0.7s1.1,0.5,2.3,0.9c1.5,0.6,2.6,1.1,3.1,1.7
S318.1,16.2,318.1,17.1z"></path>
            <path class="st2" d="M332.4,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S332.4,12.1,332.4,14.1z M322.6,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S322.6,12.5,322.6,14.1z"></path>
            <path class="st2" d="M346.3,7.7V9l-2.4,0.3c0.2,0.3,0.4,0.6,0.6,1.1s0.3,0.9,0.3,1.5c0,1.3-0.4,2.3-1.3,3s-2,1.1-3.5,1.1
c-0.4,0-0.7,0-1.1-0.1c-0.8,0.4-1.2,1-1.2,1.7c0,0.4,0.1,0.6,0.4,0.8s0.8,0.3,1.5,0.3h2.3c1.4,0,2.5,0.3,3.2,0.9s1.1,1.4,1.1,2.6
c0,1.4-0.6,2.5-1.7,3.3s-2.8,1.1-5,1.1c-1.7,0-3-0.3-3.9-0.9s-1.4-1.5-1.4-2.6c0-0.8,0.3-1.5,0.8-2s1.2-1,2.1-1.2
c-0.3-0.1-0.6-0.4-0.8-0.7s-0.3-0.7-0.3-1.1c0-0.5,0.1-0.9,0.4-1.2s0.6-0.7,1.2-1c-0.7-0.3-1.2-0.7-1.6-1.4s-0.6-1.4-0.6-2.3
c0-1.4,0.4-2.5,1.3-3.3s2-1.1,3.6-1.1c0.7,0,1.3,0.1,1.8,0.2H346.3z M336,22.7c0,0.7,0.3,1.2,0.9,1.6s1.4,0.5,2.5,0.5
c1.6,0,2.8-0.2,3.6-0.7s1.2-1.2,1.2-2c0-0.7-0.2-1.2-0.6-1.4s-1.2-0.4-2.4-0.4h-2.3c-0.9,0-1.6,0.2-2.1,0.6S336,21.9,336,22.7z
M337.1,11.8c0,0.9,0.3,1.6,0.8,2s1.2,0.7,2.1,0.7c1.9,0,2.8-0.9,2.8-2.8c0-1.9-1-2.9-2.9-2.9c-0.9,0-1.6,0.2-2.1,0.7
S337.1,10.9,337.1,11.8z"></path>
            <path class="st2" d="M350.7,7.7v8.3c0,1,0.2,1.8,0.7,2.3s1.2,0.8,2.2,0.8c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.6V7.7h1.9v12.8h-1.6
l-0.3-1.7h-0.1c-0.4,0.6-1,1.1-1.7,1.5s-1.5,0.5-2.4,0.5c-1.6,0-2.7-0.4-3.5-1.1s-1.2-1.9-1.2-3.6V7.7H350.7z"></path>
            <path class="st2" d="M371.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H371.5z M367.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S366.4,19.2,367.1,19.2z"></path>
            <path class="st2" d="M385.7,18.8h-0.1c-0.9,1.3-2.2,2-4,2c-1.7,0-3-0.6-3.9-1.7s-1.4-2.8-1.4-4.9s0.5-3.8,1.4-4.9s2.2-1.8,3.9-1.8
c1.7,0,3.1,0.6,4,1.9h0.2l-0.1-0.9l0-0.9V2.3h1.9v18.2H386L385.7,18.8z M381.8,19.2c1.3,0,2.3-0.4,2.9-1.1s0.9-1.9,0.9-3.5v-0.4
c0-1.8-0.3-3.1-0.9-3.9s-1.6-1.2-2.9-1.2c-1.1,0-2,0.4-2.6,1.3s-0.9,2.1-0.9,3.8c0,1.6,0.3,2.9,0.9,3.7S380.7,19.2,381.8,19.2z"></path>
            <path class="st2" d="M399.6,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H399.6z M395.2,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S394.4,19.2,395.2,19.2z"></path>
            <path class="st2" d="M410.9,7.5c0.6,0,1.1,0,1.5,0.1l-0.3,1.8c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
H405V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S410.1,7.5,410.9,7.5z"></path>
            <path class="st2" d="M420.7,7.5c0.6,0,1.1,0,1.5,0.1L422,9.4c-0.5-0.1-1-0.2-1.4-0.2c-1,0-1.9,0.4-2.7,1.3s-1.1,1.9-1.1,3.2v6.9
h-1.9V7.7h1.6l0.2,2.4h0.1c0.5-0.8,1.1-1.5,1.7-1.9S419.9,7.5,420.7,7.5z"></path>
            <path class="st2" d="M432.5,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2s-1.1-0.7-2.1-0.7c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H432.5z M428.1,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S427.4,19.2,428.1,19.2z"></path>
            <path class="st2" d="M454.4,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H438V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H454.4z"></path>
            <path class="st2" d="M468.2,20.6l-0.4-1.8h-0.1c-0.6,0.8-1.3,1.3-1.9,1.6s-1.4,0.4-2.4,0.4c-1.3,0-2.3-0.3-3-1s-1.1-1.6-1.1-2.8
c0-2.6,2.1-4,6.2-4.1l2.2-0.1v-0.8c0-1-0.2-1.8-0.7-2.2S466,9.1,465,9.1c-1.1,0-2.3,0.3-3.6,1l-0.6-1.5c0.6-0.3,1.3-0.6,2.1-0.8
s1.5-0.3,2.3-0.3c1.5,0,2.7,0.3,3.4,1s1.1,1.8,1.1,3.3v8.8H468.2z M463.8,19.2c1.2,0,2.2-0.3,2.9-1s1-1.6,1-2.8v-1.2l-1.9,0.1
c-1.5,0.1-2.7,0.3-3.3,0.7s-1,1.1-1,2c0,0.7,0.2,1.2,0.6,1.6S463.1,19.2,463.8,19.2z"></path>
            <path class="st2" d="M473.4,19.3c0-0.5,0.1-0.9,0.4-1.2s0.6-0.4,1-0.4c0.5,0,0.8,0.1,1.1,0.4s0.4,0.7,0.4,1.2
c0,0.5-0.1,0.9-0.4,1.2s-0.6,0.4-1.1,0.4c-0.4,0-0.7-0.1-1-0.4S473.4,19.9,473.4,19.3z"></path>
            <path class="st2" d="M485.2,20.8c-1.9,0-3.3-0.6-4.3-1.7s-1.5-2.8-1.5-4.9c0-2.1,0.5-3.8,1.6-5s2.5-1.8,4.4-1.8
c0.6,0,1.2,0.1,1.9,0.2s1.1,0.3,1.5,0.5L488,9.8c-0.4-0.2-0.9-0.3-1.4-0.4s-1-0.2-1.3-0.2c-2.6,0-3.9,1.7-3.9,5
c0,1.6,0.3,2.8,1,3.6s1.6,1.3,2.8,1.3c1.1,0,2.2-0.2,3.3-0.7v1.7C487.6,20.6,486.5,20.8,485.2,20.8z"></path>
            <path class="st2" d="M502.6,14.1c0,2.1-0.5,3.7-1.6,4.9s-2.5,1.8-4.4,1.8c-1.1,0-2.2-0.3-3.1-0.8s-1.6-1.3-2.1-2.3
s-0.7-2.2-0.7-3.5c0-2.1,0.5-3.7,1.6-4.9s2.5-1.8,4.4-1.8c1.8,0,3.2,0.6,4.3,1.8S502.6,12.1,502.6,14.1z M492.8,14.1
c0,1.6,0.3,2.9,1,3.8s1.6,1.3,2.9,1.3s2.2-0.4,2.9-1.3s1-2.1,1-3.8c0-1.6-0.3-2.9-1-3.7s-1.6-1.3-2.9-1.3c-1.3,0-2.2,0.4-2.9,1.3
S492.8,12.5,492.8,14.1z"></path>
            <path class="st2" d="M522.3,20.6v-8.4c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2-0.8c-1.2,0-2.1,0.3-2.7,1s-0.9,1.8-0.9,3.2v7.2h-1.9v-8.4
c0-1-0.2-1.8-0.7-2.3s-1.1-0.8-2.1-0.8c-1.2,0-2.1,0.4-2.7,1.1s-0.8,1.9-0.8,3.6v6.7H506V7.7h1.6l0.3,1.8h0.1
c0.4-0.6,0.9-1.1,1.6-1.5s1.4-0.5,2.2-0.5c2,0,3.3,0.7,3.9,2.2h0.1c0.4-0.7,0.9-1.2,1.7-1.6s1.6-0.6,2.5-0.6c1.5,0,2.5,0.4,3.3,1.1
s1.1,1.9,1.1,3.6v8.4H522.3z"></path>
          </g>
        </svg>
      </div>
    </div>
  </div>
</div>

当您在 Edge 浏览器中打开此演示时,您会看到 svg 彼此重叠,并且在 IE11 中高度未正确应用于 svg。但这不会发生在任何其他浏览器中?

  1. 为什么在 Edge 浏览器中 svgs 重叠?
  2. 为什么在 IE11 中未正确应用行内高度?

证明:

边缘版本:38.14393
边缘 Html 版本:14.14393

Windows 10 专业版
操作系统版本:1115
操作系统构建:10586.839

enter image description here

最佳答案

按照我们的 conversation in chat .我已找到解决 IE11 中小文本问题的方法。

IE11 small text

原因是 .marquee-horizo​​ntal 设置了 width: 300px; 并且 IE11 正在为所有 child 解释这个。这意味着您的 SVG 高度为 26 像素,宽度为 300 像素。这改变了图像的纵横比。

假设所有尺寸都不变,然后添加以下 CSS。

.marquee-content svg {
    height: 26px;
    width: 483.8px;
}

显然,这样做的缺点是您需要显式设置宽度,这很烦人。
我会思考/研究如何使 SVG 保持纵横比并具有动态宽度和设置高度。 (使用 width: auto; 适用于除 IE11 以外的所有浏览器)

更新

这真让我恼火。

我已经对代码做了更多的尝试。如果您更改您的 svg 代码。
从此

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" xml:space="preserve">

为此

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">

我所做的更改是删除 viewBox"。这是因为 viewBox attribute 采用参数(以空格分隔)、x ywidthheight。因此在这种情况下,删除这些只会使 svg 自行缩放。

这将修复 svg 的“小外观”。这解决不了的是神秘的重叠。
在 IE 中,SVG 会显示“contacto_no_spam#ventapisoguadarrama.com”,这两个 SVG 会重叠。
在 Chrome 中,SVG 会显示“contacto_no_spam#ventap”。但是,如果您进入开发人员控制台,您仍然可以突出显示路径,它们只是不可见。两种浏览器都在“ventap”位之后停止元素的宽度。 IE 仅完成 SVG,而其他浏览器则不会。

我以前从未使用过svg,所以我不知道这是什么原因。我只是在努力尝试,因为我讨厌不知道。

关于html - 为什么内联 block svgs 在 Edge 浏览器中重叠,在 IE11 中显示很小,高度以像素为单位,宽度为自动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43094616/

相关文章:

javascript - 滚动到通过 jquery 切换打开的 div 的底部

javascript - CSS3 跳跃动画?

javascript - 按钮单击到下一个选项卡而不是选项卡单击

css - Son of Suckerfish 下拉菜单在 IE7 中的对齐方式

css - IE 中的圆 Angular div(6/7)

javascript - 放大时平滑自动滚动到底部 JavaScript

html - 这是什么数据格式?

html - 将图像保持在同一位置,无论放大或缩小

php - 来自不同表格的 AJAX/Javascript/PHP 三重下拉菜单

Django-Http 重定向在 Internet Explorer 中失败