zoukankan      html  css  js  c++  java
  • 安卓字体12px以下,相较于ios中显示效果上下不居中

    上面两张图分别是 ios safari浏览器 和 安卓原生浏览器 截图

    更多秒杀处能够明显看到安卓浏览器有明显的向上

    <section>
              <a className="btn">
                文字
              </a>
              <a className="btn-fix">
                <span className="fake">
                  文字
                </span>
                <span className="inner">
                  文字
                </span>
              </a>
              <a className="btn-fix">
                <span className="fake">
                  文文字字
                </span>
                <span className="inner">
                  文文字字
                </span>
              </a>
            </section>
    .btn {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      overflow: hidden;
      color: #fff;
      background-color: #333;
      font-size: 10px;
      padding: 0 10px;
      margin: 10px;
    }
    
    .btn-fix {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      overflow: hidden;
      color: #fff;
      background-color: #333;
      padding: 0 10px;
      margin: 10px;
      position: relative;
      white-space: nowrap;
    }
    .btn-fix .inner {
      font-size: 10px;
      display: inline-block;
      color: red;
      visibility: hidden;
    }
    .btn-fix .fake {
      font-size: 20px;
      position: absolute;
      display: inline-block;
      transform: scale(.5);
      -webkit-transform: scale(.5);
      transform-origin: left center;
      -webkit-transform-origin: left center;
    }

    这个方法需要复制一份子元素的代码,并且对其中一份设置成visibility: hidden;用来占位,

    另一份需要设置成2倍大小的font-size,一般情况下这个字号大小会大于12,然后通过transform缩放一半。

    安卓浏览器效果如下:

  • 相关阅读:
    HDU
    POJ-1325 Machine Schedule 二分图匹配 最小点覆盖问题
    HDU- 6437.Videos 最“大”费用流 -化区间为点
    曼哈顿最小生成树 全网最全
    牛客 136G-指纹锁 set容器重载
    牛客 136J-洋灰三角 +高中数学博大精深
    数学:矩阵快速幂
    数学:Burnside引理与Pólya定理
    数据结构:树上分块
    数据结构:Bitset
  • 原文地址:https://www.cnblogs.com/hellolol/p/9579792.html
Copyright © 2011-2022 走看看