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

Это потому, что вы дали position:absolute всем div, что он занимает верхнюю позицию окна, так что событие не запускается. Я также рассчитал вертикальное выравнивание, он работает здесь .

HTML:

<button>
  <div>
    <svg width="400" height="110">
    <rect width="100%" 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>

CSS:

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

JS:

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

Answer 2

Проблема не в абсолютной позиции вашей кнопки, проблема в абсолютной позиции div внутри кнопки. кнопка теряет ширину и высоту элемента div внутри нее и похожа на пустую кнопку (ширина и высота = 0).

удалить абсолютную позицию вашего div и добавить -43px к top вашей кнопки, используя calc.

$('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>