对于早期的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的效果失效
遇到的问题都以解决,但是觉得不是最优解,希望有大神可以指点!🙏🙏🙏