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的效果失效

遇到的问题都以解决，但是觉得不是最优解，希望有大神可以指点！

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案相关推荐

chrome html代码提示框,如何去掉chrome浏览器自动完成输入框背景黄色
chrome浏览器或其它webkit内核浏览器自动完成输入框的输入后,输入框会有淡黄色背景.就像这样: 我们一般不想要这个样式. 如果只是想去掉这个黄色背景,我们可以用足够大的内阴影来遮盖这个黄色背景 ...
Chrome浏览器设置护眼模式(离线安装插件)
Chrome浏览器设置护眼模式(离线安装插件) 1.下载眼睛护航Care-your-Eyes_v5.1.3.crx插件 https://pan.baidu.com/s/1Xahnt8NQfDxaKid ...
完美解决Chrome浏览器中图片出现彩色马赛克的问题
问题描述使用Chrome浏览器浏览网页的时候出现了如下的情况: 解决方案打开Chrome的设置. 进入高级部分的系统. 将"使用硬件加速模式(如果可用)"取消. 个人的猜测 C ...
win10系统打开chrome浏览器几秒后自动闪退
谷歌浏览器闪退的可能的原因主要有开启了沙盒模式.打开了太多标签.未更新到最新版本.电脑有病毒或恶意软件以及不兼容的程序.解决谷歌浏览器闪退的方法有:1.禁用沙盒模式:2.关闭选项卡并禁用扩展:3.检查 ...
chrome浏览器：打包插件与安装打包插件详细教程
1 进入插件管理在chrome浏览器地址栏输入:chrome://extensions/然后回车,即可进入插件管理.也可通过如下方式进入. 点击chrome浏览器右上角的"",列 ...
Chrome插件安装失败，此扩展程序可能已损坏。
文章目录问题描述解决方案实用插件油猴脚本参考文献问题描述新版Chrome装插件常常出现问题--Chrome插件安装失败,此扩展程序可能已损坏. 解决方案打开 Chrome 所在位置,默 ...
中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...
[前端] Chrome浏览器默认显示最小字号为12px
Chrome浏览器默认显示最小字体为12px Chrome默认最小字号是12px(最新版英文也有此问题),这个是Chrome为了更好显示中文设计的. 但是这样一来就会出现,设置为8px字体的元素在Ch ...
Chrome浏览器不支持字体小于12px的解决办法
谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,具体效果见下图.有些特殊情况下我们需要字体小点,特别是在制作英文网站的时候,怎么办?既然有问题,我们就有解决问题的方法. < ...

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案相关推荐

最新文章

热门文章