Question

我不知道将width: 1em添加到SVG以修复IE11问题的替代方法（请参阅代码中的注释）。使用codepen中的代码。感谢任何帮助！谢谢:)）

https://codepen.io/ambrwlsn90/pen/zjZYpb

<div class="box">
    <span class="handle--draggable">
      <svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 10 32">
        <circle cx="2" cy="2" r="2" />
        <circle cx="8" cy="2" r="2" />
        <circle cx="2" cy="9" r="2" />
        <circle cx="8" cy="9" r="2" />
        <circle cx="2" cy="16" r="2" />
        <circle cx="8" cy="16" r="2" />
        <circle cx="2" cy="23" r="2" />
        <circle cx="8" cy="23" r="2" />
        <circle cx="2" cy="30" r="2" />
        <circle cx="8" cy="30" r="2" />
      </svg>
    </span>
</div>

.box {
  position: relative;
  width: 400px;
  height: 100px;
  border: 3px solid black;
  background-color: white;
  top: 50px;
  left: 100px;
  padding: 15px;
  line-height: 1.5em;
}

.handle--draggable {
  position: absolute;
  cursor: move;
  left: -26px;
  top: -3.5px;
}

/**
  * 1. Magic number added to fix visual bug in IE: 11
  */

.handle--icon {
  fill: black;
  background-color: grey;
  padding: 3.5px;
  height: 37px;
  width: 1em; /* 1. */
  position: relative;

  &:hover {
    left: -5px;
    border-right: 5px solid grey;
  }
}

Answer 1

SVG标记需要一些基本属性才能按预期呈现。如果您根据最外面的svg标记阅读W3C文档，您会找到答案：

对于嵌入的'svg'元素，'svg'元素所在的矩形区域的宽度。负值是错误（请参阅错误处理）。值为零将禁用元素的呈现。 如果未指定该属性，则效果就像指定了值“100％”一样。

因此，您需要指定SVG标记的width和height属性，否则它将以100％宽度呈现。

开场svg标记应如下所示：

<svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 32" width=“10” height=“32”>

然后SVG将看起来是相同的crossbrowser。

在width元素上定义height和svg属性后，您可以放弃丑陋的Internet Explorer 11黑客攻击。

IE11默认SVG为100％宽度 - 如何重构此代码？

1 个答案: