Chrome(77.0.3865.90)中父固定元素添加边框时的绝对元素变化答案

【问题标题】：The absolute element change when parent fixed element add border in Chrome(77.0.3865.90)Chrome(77.0.3865.90)中父固定元素添加边框时的绝对元素变化
【发布时间】：2019-09-26 19:23:45
【问题描述】：

在chrome浏览器中，当给父固定元素添加边框时，它的绝对子元素位置会发生变化，特别是通过父元素的外边框，但在edge和Firefox浏览器中不会。

document.getElementById('add').addEventListener("click",()=>{
		document.getElementById('fixed').classList.add("border");
	})
	document.getElementById('delete').addEventListener("click",()=>{
		document.getElementById('fixed').classList.remove("border");
	})

	.fixed{
		position: fixed;
		width: 400px;
		height: 400px;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background: red;
	}
	.absolute{
		position: absolute;
		width: 100px;
		height: 30px;
		top: 30px;
		right: 30px;
		background: yellow;
	}
	.border{
		border:8px solid green;
	}

<html>
<head>
	<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
	<div class="absolute" ></div>
	<button id="add">add</button>
	<button id="delete">delete</button>
</div>

</body>
</html>

【问题讨论】：

标签： css position css-position fixed absolute

【解决方案1】：

这绝对是 Chrome 的 bug，它们不会触发重新计算位置

您可以通过确保重新计算位置来解决此问题你也可以使用

right:0.000001px;

如果你在两个单独的规则中写点什么宽度。但我认为这比下面的解决方案更丑

document.getElementById('add').addEventListener("click",()=>{
		document.getElementById('fixed').classList.add("border");
	})
	document.getElementById('delete').addEventListener("click",()=>{
		document.getElementById('fixed').classList.remove("border");
	})

	.fixed{
		position: fixed;
		width: 400px;
		height: 400px;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background: red;
	}
	.absolute{
		position: absolute;
		width: 100px;
		height: 30px;
		top: 30px;
		right: 30px;
		background: yellow;
	}
	.border{
		border:8px solid green;
	}
.fixed{
	position: fixed;
	width: 400px;
	height: 400px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background: red;
}
.absolute{
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	right: 0px;
	background: yellow;
}
.border{
	border:8px solid green;
}
  .border .absolute{
left:calc(100% - 30px);
  }

<html>
<head>
	<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
	<div class="absolute" ></div>
	<button id="add">add</button>
	<button id="delete">delete</button>
</div>

</body>
</html>

【讨论】：