当指针事件设置为 None 时，link 中的 SVG 在 IE11 中不可点击

Question

我有一个与此类似的 HTML/CSS 文件。

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
 </div>
</div>

在 Chrome 上，我可以单击带有 link 的蓝色 SVG，但在 IE11 上，我不能。有谁知道为什么会这样，以及我可以做些什么来在不影响其他浏览器的情况下在 IE 上修复它？ SVG 规则适用于其他一些 SVG，因此不必更改它会很好。

谢谢！

Answer 1

我目前无法自行测试，但请尝试一下：

svg{
  pointer-events: none
}
svg>rect{
  position: relative;
  pointer-events: auto;
}

我引用的是这个：https://css-tricks.com/almanac/properties/p/pointer-events/#comment-1108851

我编辑了我的答案。老实说，我不太确定你为什么要这样做。如果您想单击它，禁用 svg 上的指针事件有什么用？

Answer 2

问题不在于 SVG 本身或 pointer-events。问题是 a 标签，以及 IE 11 在其中包含块元素时如何呈现标签。

我测试的解决方案是设置 a 标签的样式以填充其容器：

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

我以前在旧版本的 Internet Explorer 中使用 SVG 作为图像遇到过这个问题。

希望对您有所帮助！

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
  </div>
</div>

编辑： 我会写这篇文章来解释我的经历。旧浏览器，包括旧版本的 Firefox、Chrome 和 Internet Explorer，不支持在内联元素中嵌套块元素。因此，如果您尝试将 div 元素嵌套在 link 中，将导致用户无法单击 link 和其他一些奇怪的行为。新的浏览器支持其中一些技术（例如，link 内部有一些 div 布局，因此所有块都是可点击的）。 IE11 在围栏上。我还遇到了 SVG 和 IE11 的一些问题，甚至使用 SVG 作为图像（通过 img 标签和外部 SVG 文件）。

主要问题是某些css属性不能在旧浏览器中设置，如witdh、高度和垂直填充（padding top and bottom）。所以如果你在一个内联元素中嵌套了一个块元素，并且该元素超出了内联元素的尺寸（由元素的字体大小、行高和垂直对齐方式继承），则内联元素将无法正确呈现。

希望这个小修改能帮助您理解问题。

当指针事件设置为 None 时，link 中的 SVG 在 IE11 中不可点击

SVG inside link not clickable in IE11 when pointer-events set to None

html

css

internet-explorer

svg

internet-explorer-11