我的專案有問題。當我在 html 級別插入自定義字體大小時，當第一行代碼中有填充 (p-6) 時，紅色徽章會使我變形。誰能幫我？我使用順風，但即使我在樣式中插入寬度，也會出現此錯誤，僅使用 rem。
演示
uj5u.com熱心網友回復：
它與亞像素渲染有關。如果在 html 級別使用 13px 字體大小，則寬度和高度變為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>相關回答
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403304.html
標籤：