如果存在填充，则具有 rem 大小的宽度会变形

Question

我的项目有问题。当我在 html 级别插入自定义字体大小时，当第一行代码中有填充 (p-6) 时，红色徽章使我变形。谁能帮我？我使用 tailwind，但即使我在样式中插入宽度时也会出现此错误，仅使用 rem。

Answer 1

与亚像素渲染有关。如果在html级别使用13px font-size，那么宽高就变成了9.75px.

解决方案是使用较大的值并对其进行缩放。

我用 w-6 h-6 ring-8 scale-50 而不是 w-3 h-3 ring-4。这看起来很完美。

html {
  font-size: 13px;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-screen h-screen bg-neutral-50">
  <header class="flex flex-row bg-white p-6">
    <div class="flex-1 flex flex-row justify-end space-x-2">
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-red-500 rounded-full ring-8 ring-white absolute top-0 right-0 origin-top-right"></div>
      </div>
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-red-500 rounded-full ring-8 ring-white absolute top-0 right-0 origin-top-right"></div>
      </div>
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-green-500 rounded-full ring-8 ring-white absolute bottom-0 right-0 origin-bottom-right"></div>
      </div>
    </div>
  </header>
</div>

如果存在填充，则具有 rem 大小的宽度会变形

Width with rem size deform if padding is present

html

css

tailwind-css