温州企业网站开发,网站建设与经营,企业怎么做app网址,鞍钢节能公司网站开发对于早期的chrome, 如果要想显示12px以下的字体#xff0c;一般通用的方案都是在对应的元素中添加
div {-webkit-text-size-adjust: none;
}但是我今天遇到的需求#xff0c;添加了之后没有反应#xff0c;而且浏览就根本不支持这种写法。
在网上看到了博客《Chrome浏览器…对于早期的chrome, 如果要想显示12px以下的字体一般通用的方案都是在对应的元素中添加
div {-webkit-text-size-adjust: none;
}但是我今天遇到的需求添加了之后没有反应而且浏览就根本不支持这种写法。
在网上看到了博客《Chrome浏览器不支持字体小于12px的解决办法》看到了解决方案使用transform display 于是便实践了一番
具体如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title实现一个带Badge徽标的图片按钮/titlestyle typetext/cssh6 {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
bodydiv classbuttonh6!-- img src/assets/img/cloud.png alt / --div/divspan10/span/h6span内容内容内容/span/div
/body
/html效果如下
上述实现过程中遇到了这么几个问题
使用transform带来的缩小问题实际宽度所占据的空间不会消失使用display之后如果要绝对定位display的效果失效
遇到的问题都以解决但是觉得不是最优解希望有大神可以指点
