Firefox绝对位置阻止按钮单击

Question

我已经阅读了许多有关此问题的内容，但它们似乎无法解决我的问题。基本上，在Firefox上，子元素（svg）将覆盖按钮并阻止其被单击。这段代码在Chrome浏览器中工作正常，但在Firefox中无法正常工作。我尝试应用height: 100%和width: 100%，建议解决此问题，但是可点击区域从元素的一半开始（请参见图片）。

如何以适用于现代浏览器的方式更正此问题？

我只希望按钮具有子元素的大小。复杂性来自需要在容器div中垂直居中的按钮，这就是为什么它有top: 50%的原因。这是一个可重用的组件，因此我需要一种以动态方式使其垂直居中的方法，因此不能仅仅改变位置。

我在这里模拟了一个示例：

$('button').on('click', (e) => {
	alert('clicked');
});

button {
  z-index: 1;
  position: absolute;
  top: 50%;
  background-color: transparent;
  border: none;
}

div {
  position: absolute;
  top: -43px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
  <div>
    <svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    Sorry, your browser does not support inline SVG.  
  </svg>
  </div>
  
</button>

任何帮助将不胜感激。

Answer 1

问题不是按钮的绝对位置，问题是div在按钮内的绝对位置。该按钮失去了其内部div的宽度和高度，就像一个空按钮（width和height = 0）。

删除div的绝对位置，然后使用calc将-43px添加到按钮的top中。

$('button').on('click', (e) => {
	alert('clicked');
});

button {
  z-index: 1;
  position: absolute;
  top: calc(50% - 43px);
  background-color: transparent;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
  <div>
    <svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    Sorry, your browser does not support inline SVG.  
  </svg>
  </div>
  
</button>

Answer 2

这是因为您已将所有{} {1}}赋予其在窗口中的最高位置，所以该事件不会触发。我还计算了垂直对齐方式，看到它有效here。

HTML：

import copy

my_copy = copy.copy(my_obj)
my_copy.my_attribute = my_value

CSS：

copy.deepcopy(my_obj)

JS：

[testenv]
deps =
    package1
    package2 
...