对于早期的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的效果失效
遇到的问题都以解决，但是觉得不是最优解，希望有大神可以指点！🙏🙏🙏
![bzoj [Usaco2009 Hol]Cattle Bruisers 杀手游戏](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
