Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案
生活随笔
收集整理的這篇文章主要介紹了
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 已失效的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring MVC配置form支持PU
- 下一篇： ie兼容响应式布局的实现总结