CSS 伪元素在移动其位置时改变高度

Posted 2023-03-05

【中文标题】CSS 伪元素在移动其位置时改变高度

【英文标题】：CSS Pseudo Element Changes Height When Moving its Position

【发布时间】：2017-04-12 03:17:39

【问题描述】：

我正在创建选项卡，其中选项卡列表中的每个链接都位于带有边框的 div 中 - 类似于：

为了隐藏所选标签下方的标签集的底部边框，我添加了一个伪元素（:after），它是链接的全宽，其高度与底部边框相同（ 2px），并且还有一个bottom 值为负的边框高度（-2px）。我遇到了一个问题，根据伪元素的位置（bottom 值），它的渲染高度会发生变化。如果我将它的高度设置为 2px，它会在 1px 和 2px 之间波动，并且在移动它的位置时每 2px 执行一次。

例如，在bottom: 3px，它看起来像这样（为了便于说明，我将背景设为红色）：

但是如果我设置bottom: 2px，我会得到这个：

我在 Firefox 和 chrome 上都看到了这种行为。 Here's a codepen illustrating.

这是相同代码的内联 sn-p：

.main-container 
	padding: 50px;
	font-family: arial;


.link-container 
	display: inline-block;
	border: 2px solid #000;


a 
	position: relative;
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	padding: 5px 5px 15px;



a:hover 
	background: #ccc;


a:after 
	content: "";
	position: absolute;
	z-index: 1;
	height: 2px;
	left: 0;
	right: 0;
	bottom: 2px;
	background: red;


a.tab2:after 
	bottom: 3px;

<div class="main-container">
	<div class="link-container">
		<a class="tab1" href="#">Test Tab</a>
	</div>
	<div class="link-container">
		<a class="tab2" href="#">Test Tab</a>
	</div>
</div>

发生了什么事？

【问题讨论】：

如果您不想要底部边框...为什么不直接删除它？

但是，据我了解，绝对定位的元素在计算其位置时会忽略其“相对”元素的边界。换句话说..bottom:0 将在内部任何边界。

@Paulie_D - b/c 整个导航列表上有一个边框延伸到整个屏幕，所以我需要为该部分隐藏真正的 this 边框在活动标签下方。

【参考方案1】：

为什么不干脆这么干：完全去掉伪元素，把边框缩小到三边：

.link-container 
    display: inline-block;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;

它在你的 sn-p 中：

.main-container 
	padding: 50px;
	font-family: arial;


.link-container 
	display: inline-block;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	border-right: 2px solid #000;


a 
	position: relative;
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	padding: 5px 5px 15px;



a:hover 
	background: #ccc;

<div class="main-container">
	<div class="link-container">
		<a class="tab1" href="#">Test Tab</a>
	</div>
	<div class="link-container">
		<a class="tab2" href="#">Test Tab</a>
	</div>
</div>

【参考方案2】：

您的浏览器很可能已在页面上放大。通过单击 ctrl + 0 确保您正在以 100% 大小查看页面，并查看高度是否仍随位置而变化。

除此之外，如果我正确理解您想要实现的目标，那么您会让事情变得比需要的复杂得多。

首先，除非您有理由，否则不需要链接容器 div。您可以直接将链接作为主容器 div 的子项并直接为其添加边框。

其次，您可以使用border-bottom并将其设置为您喜欢的任何内容。

【讨论】：

这不是缩放问题 - 你可以在我上面的代码 sn-p 中看到 - 自己运行它，你会看到 2 行之间的高度差。

当我以 100% 的缩放比例移动位置时，对我来说没有高度差异。但是，当我移动位置并放大时，我确实看到高度发生了变化。我正在使用 Chrome。

刚刚检查了 FireFox 和同样的东西。