鍍金池/ 問答/HTML/ Device Pixel Ratio 引起絕對定位位置異常

Device Pixel Ratio 引起絕對定位位置異常

這兩天做開發(fā)的過程中出現(xiàn)了一個問題。公司開發(fā)用的電腦的 device pixel ratio 是 1.25。

假設(shè)如下的HTML和CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DPR Issue</title>
</head>
<body>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
</body>
</html>
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.tick {
  border: 1px solid red;
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 10px auto;
}

.tick::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: blue;
}

想要實現(xiàn)的效果很簡單，就是長寬都是18px的.tick的::after偽元素被絕對定位到.tick的左上角（即 top: 0; left: 0;）。

結(jié)果，在devicePixelRatio === 1.25 的機器上會出現(xiàn)如下圖中的定位問題：

圖片描述

在devicePixelRatio為1的電腦上就不會出現(xiàn)這個情況。

在此向諸位求教該問題出現(xiàn)的原因，以及是否存在任何的方式去解決或避免問題出現(xiàn)？

多謝各位！

回答
編輯回答
六扇門

沒有人遇到同樣的問題嗎？

目前來看感覺像是瀏覽器渲染引擎方面的問題。

2018年5月27日 13:37