旋转的 div 在 Chrome 和 Firefox 中呈现不同答案

【问题标题】：Rotated divs rendering differently in Chrome and Firefox旋转的 div 在 Chrome 和 Firefox 中呈现不同
【发布时间】：2018-06-19 16:34:44
【问题描述】：

我在 Firefox 和 Chrome 的渲染中存在以下差异

* {
	box-sizing: border-box;
}

.arrow-container {
	padding: 35px 15px;
	width: 60px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.3);
}

.arrow {
	position: relative;
	width: 30px;
	height: 30px;
}

.arrow::before,
.arrow::after {
	content: '';
	display: block;
	position: absolute;
	right: 2px;
	width: 30px;
	height: 3px;
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff;
}

.arrow::before {
	top: 50%;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}

.arrow::after {
	bottom: 50%;
	transform-origin: 100% 100%;
	transform: rotate(-45deg);
}

<div class="arrow-container">
	<div class="arrow"></div>
</div>

我想知道是否有任何方法可以克服这种差异？作为记录，删除 box-shadow 并不能解决问题。

【问题讨论】：

标签： html css google-chrome firefox cross-browser

【解决方案1】：

使用 height 的偶数值（因为 Chrome 计算像素的小数值，而 Firefox 不计算）和更简单的 box-shadow，结果会更准确。

* {
	box-sizing: border-box;
}

.arrow-container {
	padding: 35px 15px;
	width: 60px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.3);
}

.arrow {
	position: relative;
	width: 30px;
	height: 30px;
}

.arrow::before,
.arrow::after {
	content: '';
	display: block;
	position: absolute;
	right: 2px;
	width: 30px;
	height: 4px;
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 #ffffff;
}

.arrow::before {
	top: 50%;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}

.arrow::after {
	bottom: 50%;
	transform-origin: 100% 100%;
	transform: rotate(-45deg);
}

<div class="arrow-container">
	<div class="arrow"></div>
</div>

【讨论】：

啊，不错。谢谢。