火狐中绝对定位的元素 iniside 链接的问题

Question

我试图通过让我的链接看起来好像左上角被咬掉了，我通过绝对定位一个与链接本身具有相同背景颜色的正方形元素来做到这一点。

这在 Chrome 中有效，但由于某种原因，在 Firefox 中，无论如何方形元素都会留在链接元素内，我该如何解决这个问题？

我的代码：

<section style="width:100%; height:auto; display:flex; justify-content:space-between; padding:0px 75px; outline:1px solid red;">
<div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
<div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
		    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
		    
		</div>
		<a href="" style="font-size:22px; padding:10px 20px; outline:1px solid red; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; outline:1px solid red;"></span></a>
		<span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
<div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
<div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
		    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
		    
		</div>
		<a href="" style="font-size:22px; padding:10px 20px; outline:1px solid red; align-self:center; margin-bottom:25px; position:relative;">HACER RESERVA<span style="width:27px; height:27px; position:absolute; top:-9px; left:-9px; background-color:white; outline:1px solid red;"></span></a>
		<span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Contamos con una amplia terraza para poder degustar nuestra comida japonesa.</span>
	</div>
</section>

Answer 1

如果您给出a并spandisplay:block，则可以使用。

<section style="width:100%; height:auto; display:flex; justify-content:space-between; padding:0px 75px; outline:1px solid red;">
<div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
<div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
		    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
		    
		</div>
		<a href="" style="font-size:22px; padding:10px 20px; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></span></a>
		<span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
<div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
<div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
		    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
		    
		</div>
		<a href="" style="font-size:22px; padding:10px 20px; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></span></a>
		<span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
</section>

Answer 2

如果你在父元素上设置了display: table;，它应该可以在Firefox中工作