html - 在伪元素在 chrome 和 firefox 上出现不同之前

Question

所以我遇到了这个奇怪的错误，Chrome 没有在我的 div 中显示带有类“to_top”的伪元素，它在 Chrome 上完美运行，但 Firefox 没有在正方形外显示水平线，而是出现在里面而是扩大了容器 div，这很可悲。有什么办法可以解决这个问题吗？

这是我的代码(对于内联样式很抱歉，但这不是这里的问题):

.to_top::before{content:""; position:absolute; width:100%; height:1px;  border-top:1px solid red; left:0px; top:-5px;}

<div style="width:100%; height:auto; display:flex; flex-direction:column;">
    <div style="width:100%; height:300px; display:flex; flex-direction:column; position:relative; align-items:center; background: linear-gradient(to bottom, rgba(36, 31, 28, 1.0), rgba(36, 31, 28, 0.9)); justify-content:center;">
	    <div class="to_top" style="width:50px; height:55px; outline:1px solid red; display:flex; position:absolute; right:50px; top:50px; overflow:visible;">
		    <!--<span style="width:50px; height:1px; border-top:1px solid red; position:absolute; left:0px;  top:-5px;"></span>-->
		    <i class="fa fa-chevron-up" style="font-size:30px; color:red; margin:auto;"></i>
		</div>
		<div style="width:auto; height:auto; display:flex; margin:15px 0px;">
		    <a href="" style="width:50px; height:50px; border-radius:50%; background-color:#5D973A; display:flex; margin:0px 15px;"><i class="fa fa-tripadvisor" style="margin:auto; font-size:22px; color:#292421;"></i></a>
		    <a href="" style="width:50px; height:50px; border-radius:50%; background-color:#5D973A; display:flex; margin:0px 15px;"><i class="fa fa-yelp" style="margin:auto; font-size:22px; color:#292421;"></i></a>
			<a href="" style="width:50px; height:50px; border-radius:50%; background-color:#5D973A; display:flex; margin:0px 15px;"><i class="fa fa-facebook" style="margin:auto; font-size:22px; color:#292421;"></i></a>
		</div>
		<div style="width:auto; height:auto; display:flex; margin:15px 0px;">
		    <a href="" style="font-size:20px; text-transform:uppercase; margin:0px 12px; color:rgba(255,255,255,0.9); font-weight:500;">MENU</a>
			<a href="" style="font-size:20px; text-transform:uppercase; margin:0px 12px; color:rgba(255,255,255,0.9); font-weight:500;">LOCALIZACIÓN</a>
			<a href="" style="font-size:20px; text-transform:uppercase; margin:0px 12px; color:rgba(255,255,255,0.9); font-weight:500;">HORARIO</a>
			<a href="" style="font-size:20px; text-transform:uppercase; margin:0px 12px; color:rgba(255,255,255,0.9); font-weight:500;">CONTACTO</a>
			<a href="" style="font-size:20px; text-transform:uppercase; margin:0px 12px; color:rgba(255,255,255,0.9); font-weight:500;">OPINIONES</a>
		</div>
	</div>
    <div style="width:100%; height:125px; display:flex; flex-direction:column; background: linear-gradient(to bottom, rgba(91, 150, 56, 1.0), rgba(91, 150, 56, 0.9)); justify-content:center; align-items:center;">
	    <span style="font-size:16px; color:rgba(255,255,255,0.9); margin:10px 0px; text-transform:upercase;">COMIDA TRADICIONAL HECHA CON <i class="fa fa-heart" style="font-size:15px; color:rgba(255,255,255,0.9); margin:0px 3px;"></i> EN MÁLAGA</span>
		<div style="display:flex; width:auto; height:20px; margin:10px 0px; align-items:center;">
		    <span style="font-size:13px; color:rgba(255,255,255,0.9); text-transform:uppercase;">Copyright © 2018 Nombre del Restaurante</span>
			<span style="width:1px; height:20px; border-right:2px solid rgba(255,255,255,0.9); margin:0px 10px;"></span>
			<span style="font-size:13px; color:rgba(255,255,255,0.9); text-transform:uppercase;">DISEÑO WEB POR GGB</span>
		</div>
	</div>
</div>

Answer 1

对正方形使用边框而不是轮廓。