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

于 2020-03-15 23:55:41 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： HTML5/CSS3布局专栏 HTML5/CSS3 文章标签： chrome 12px css transform 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013205165/article/details/104889769
版权

对于早期的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的效果失效

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

IT淘金者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
1. `-webkit-text-size-adjust`: 当网页中的字体大小小于12px时，中文版Chrome浏览器仍然会显示12px的字体。为了解决这个问题，可以在HTML元素上使用`-webkit-text-size-adjust:none;`来阻止自动调整字体大小。 2. ...
详解使用 CSS 的 font-size-adjust 属性改善网页排版
01-19
CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size ，这可以有效地提高网页文字的可读性。 在这篇文章中，你不仅能了解到font-size-adjust 属性的重要性，并且还能学会如何在你的项目中...
CSS-网页字体缩放样式-webkit-text-size-adjust的用法详解
qq_24092035的博客
11-06 1978
1、当样式表里font-size 2、-webkit-text-size-adjust放在body上会导致页面缩放失效 3、body会继承定义在html的样式 4、用-webkit-text-size-adjust不要定义成可继承的或全局的 苹果移动设备上会识别，用于保证文字大小。 写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px，如果你要设置某字体大小为10p
-webkit-text-size-adjust:none
zhizhiC的博客
03-10 2297
1、当样式表里font-size&lt;12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}2、-webkit-text-size-adjust放在body上会导致页面缩放失效3、body会继承定义在html的样式4、用-webkit-text-size-adjust不要定义成可继承的或全局的5、只对chr...
CSS -webkit-text-size-adjust:none 禁用Webkit内核浏览器的文字大小调整功能
快乐de馒头
01-21 1461
在中文版Chrome里面，Chrome的Webkit内核会把字体小于12px的强制设置为12px，意思就是字体大小不能小于12px，但是有时候需要设置小于12px的字体，这就需要禁用Webkit内核浏览器的文字大小调整功能。 解决方案，添加一个私有属性到html选择器: html{-webkit-text-size-adjust:none;} -webkit-text-size-ad...
-webkit-text-size-adjust: none;
转接遇到爱的专栏
12-03 1769
-webkit-text-size-adjust: none;在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能是好的，因为中文一旦小于12px，就变得不易阅读。 但中文版Chrome也会阅读英文网站啊！中文网页里面也会有英文的小字体设置需求啊！尤其是一些文字部份的设计，不小实在不好看，影响整个排版的美观。 解决方案，添加一个私有属性到htm
html{-webkit-text-size-adjust:none;}（取消浏览器最小字体限制）
weixin_30415801的博客
09-05 229
2016年10月13日 09:31:58ITzhongzi阅读数 9409 1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;} 2、-webkit-text-size-adjust放在body上会...
网页字体缩放样式-webkit-text-size-adjust
Alexa_cheng
09-21 743
一、先搬来知乎的回答 -webkit-text-size-adjust 的本职是用于mobile的，见规范 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide 之所以现在的桌面版webkit浏览器支持他，是因为实际上这是一下bug。Bug 56543 – CSS prop
-webkit-text-size-adjust: none;该如何处理
weixin_30762087的博客
01-25 137
在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能 是好的，因为中文一旦小于12px，就变得不易阅读。 但中文版Chrome也会阅读英文网站啊！中文网页里面也会有英文的小字体设置需求啊！尤其是一些文字 部份的设计，不小实在不好看，影响整个排版的美观。 解决方案，添加一个私有属性到html选择器: html{-webki...
-webkit-text-size-adjust
SmallCode的今天
11-12 912
-webkit-text-size-adjust: none; 在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能 是好的，因为中文一旦小于12px，就变得不易阅读。 但中文版Chrome也会阅读英文网站啊！中文网页里面也会有英文的小字体设置需求啊！尤其是一些文字 部份的设计，不小实在不好
-webkit-text-size-adjust的用法
热门推荐
star的博客
05-23 1万+
-webkit-text-size-adjust的用法如下： 1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;} 或者html{-webkit-text-size-adjust:100%;} 2、-webkit-text-size-adjust放在body上会导致页...
swagger-adjust:用于创建可扩展的React + Redux应用程序的可插拔框架
03-10
Swagger Adjust是一个可插件的框架，用于构建基于 + 的应用程序。 该框架是通过将插入核心的到单独的可重用组件而。 要了解有关此框架诞生的更多信息，请阅读我们的。 一般的 Swagger Adjust允许您以某种方式构建...
图片做背景撑开div
没做过产品的后端不是个好前端
08-09 3738
需求点： 设计师给了一张超大背景图，需要做一个不知道大小广告位，要求就是要把图片撑满整个页面，而且还得保证自适应。 解决方案一 （亲测有效） HTML代码： <div class="wrap"></div> CSS代码： .wrap{ position: relative; padding-bottom: 35%; background-image: url(/s...
绝对定位的div图片居中自适应
没做过产品的后端不是个好前端
08-09 1527
需求点 固定定位div中添加图片内容，保证图片垂直居中，并且自适应。 一般在第三方UI组件中，这种布局需求较为常见 解决方案一 （亲测有效） HTML代码： <div class="el-carousel__item is-active is-animating"> <img src="/static/img/login-bg3.51c5580.png" alt=""> ...
SVG画一个箭头
没做过产品的后端不是个好前端
03-13 786
参考菜鸟手册： https://www.runoob.com/svg/svg-tutorial.html 打开菜鸟中的在线工具 在可视化截图拖拉元素绘制箭头 点击command + U 查看源码 将源码拷入html代码中，查看效果 最后，贴出源码供大家参考 <!DOCTYPE html> <html> <body> <svg...
CSS3笔记之基础篇（二）颜色和渐变色彩
没做过产品的后端不是个好前端
05-22 680
效果一、颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有...
CSS3笔记之定位篇（一）relative
没做过产品的后端不是个好前端
11-02 374
知识点1：relative和absolute relative: 相对自身，并会限制内部absolute元素层叠 absolute: 相对容器，并受到父类容器relative的影响，比如：overflow:hidden/scroll fixed: 不受relative限制，只受z-index的限制 知识点2：定位 相对自身 无侵入: relative的元素只会改变自己...
CSS3笔记之定位篇（二）z-index
没做过产品的后端不是个好前端
11-06 260
知识点1：z-index基础 z-index：auto; 默认值 z-index: <integer> 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用 知识点2：z-index与定位元素 无嵌套：后来居上，哪个大哪个上 //在没有添加z-index属性时，如果两个图片有重叠，默认为图片2覆盖图片1 ...
-webkit-text-size-adjust:
最新发布
03-31
-webkit-text-size-adjust is a CSS property that controls the font size of text on web pages when the user zooms in or out on a mobile device. It is used to prevent text from becoming too small or too large when the user zooms in or out. The property is only supported by WebKit-based browsers like Safari and Chrome, and is not part of the official CSS specification. The values for this property are: - auto: The default value. Allows the browser to adjust the font size based on the user's zoom settings. - none: Disables text size adjustment. The font size remains the same regardless of the user's zoom settings. - percentage: Sets the font size to a specific percentage of the user's zoom level. For example, 100% means the font size stays the same, while 150% means the font size increases by 50% when the user zooms in.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值