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上，我可以点击带有链接的蓝色SVG，但在IE11上，我不是。有谁知道为什么会这样，我可以做些什么来修复IE，而不影响其他浏览器？ SVG规则适用于其他一些SVG，因此不必更改它是很好的。

谢谢！

Answer 1

问题不在于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元素，则会导致用户无法单击链接和其他一些奇怪的行为。新的浏览器支持其中一些技术（例如，内部具有一些div布局的链接，因此所有块都是可点击的）。 IE11正在崛起。此外，我还加入了SVG和IE11的一些问题，甚至使用SVG作为图像（通过img标签和外部SVG文件）。

主要问题是某些css属性无法在onlder浏览器中设置，例如witdh，高度和垂直填充（填充顶部和底部）。因此，如果将块元素嵌套在内联元素中，并且元素溢出内联元素维度（由字体大小，行高和元素的垂直对齐继承），则内联元素将无法正确呈现。

希望这个小编辑可以帮助您理解问题。

Answer 2

我目前无法对此进行测试，但请尝试一下：

Table 1 (Entity):
Entity_ID    Entity_Create_dt
   1             04-APR-18
   2             04-APR-18
   3             04-APR-18

Table 2 (TimeZone):
Time_Zone_Id     Time_Zone_Create_Dt
   1               04-APR-18
   2               04-APR-18

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

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

当指针事件设置为无时，SVG内部链接在IE11中无法单击

2 个答案: