针对谷歌默认最小字体12px的正确解决方案 (css、html)

网上所有的解决方案都惊奇地相似:

  html{

  -webkit-text-size-adjust:none;

  }

  然后我满心欢喜地用上去之后,发现并没有什么鸟用。再后来,又查了下资料了解到在chrome 27之后,就取消了对这个属性的支持。尼玛,这不是坑爹吗?柳暗花明又一村,然后发现了另一种解决办法:

     .small-font{
            font-size: 12px;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.90);
        }

  利用css3的缩放,其最终大小就是:12px * 0.9(缩放比例) = 10.8px;

  居然行得通。但回头一想,这么写的话,IE7 IE8会不会不兼容,还是12px呢?不出所料,果然不兼容。此时,又回头一想,要不再加个样式font-size?试了一下,果然兼容谷歌,IE7,IE8,代码如下:

         .small-font{    

     font-size:12px; 
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.90);
        }


        .smallsize-font {
     font-size:10.8px;

                 }

  <p style="color: #FF0000;" class="small-font smallsize-font">温馨提示:</p>

posted @ 2017-11-07 08:37  田天1  阅读(325)  评论(0编辑  收藏  举报