Chrome瀏覽器12px問題-webkit-text-size-adjust: none 已失效的解決方案

對于早期的chrome, 如果要想顯示12px以下的字體，一般通用的方案都是在對應的元素中添加

div {-webkit-text-size-adjust: none;
}

但是我今天遇到的需求，添加了之后沒有反應，而且瀏覽就根本不支持這種寫法。

在網上看到了博客《Chrome瀏覽器不支持字體小于12px的解決辦法》看到了解決方案，使用transform + display，于是便實踐了一番！

具體如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>實現一個帶Badge徽標的圖片按鈕</title><style type="text/css">h6 {position: relative;float: left;width: 33px;top: 4px;margin: 0px;padding: 0px;}h6 div {vertical-align: middle;width: 21px;height: 15px;position: absolute;background-color: green;}h6 span {position: relative;min-width: 22px;height: 22px;box-sizing: border-box;border: 4px solid #ffffff;background-color: #8dc240;border-radius: 11px;color: #ffffff;font-size: 12px;display: inline-block;transform: scale(0.7);text-align: center;line-height: 14px;top: -11px;left: 8px;}</style>
</head>
<body><div class="button"><h6><!-- <img src="@/assets/img/cloud.png" alt="" /> --><div></div><span>10+</span></h6><span>內容內容內容</span></div>
</body>
</html>

效果如下

上述實現過程中遇到了這么幾個問題：

使用transform帶來的縮小問題，實際寬度所占據的空間不會消失
使用display之后，如果要絕對定位，display的效果失效

遇到的問題都以解決，但是覺得不是最優解，希望有大神可以指點！🙏🙏🙏

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/249093.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/249093.shtml
英文地址，請注明出處：http://en.pswp.cn/news/249093.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！