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

如果您在父元素上设置了display: table;，则它应该可以在Firefox中使用

Answer 2

如果您要给a和span一个display: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>

Firefox中绝对定位的元素iniside链接出现问题

2 个答案: