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

Question

我在为 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 并不能解决问题。

Answer 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>

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

Rotated divs rendering differently in Chrome and Firefox

html

css

firefox

google-chrome

cross-browser