zoukankan      html  css  js  c++  java
  • lineheight 属性的继承问题

    <style type="text/css">
    p
    {
        line
    -height:17px;
    }
    </style>

    <div class="mdse-detail">
       
    <p>
           
    <strong style="font-size:30px">
                品牌:XZX
    <br />
                市场价:145元
    <br />
                颜色:黑色
    <br />
                面料:棉
    <br />
                尺码:S  M  L
    <br />
                衣长:S 89  M 90   L 91
    <br />
                肩宽:S 35  M 36   L 37
    <br />
                胸围:S 88  M 92   L 96
    <br />
                下摆:S 104 M 108  L 112
    <br />
                袖长:S 17  M 17.5 L18
    <br />
                由于测量方法不同,误差在2CM左右!
           
    </strong>
       
    </p>
    </div>

    你会发现上面例子的文字会重叠在一起!这是什么原因呢?

    由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px,而自定义区块又是由商家自定义,其内字体被设置为了 font-size:30px;(可能为任意值),根据 Inline formatting model,得知该文字的 line-box 高为 17px,多出的字体部分上下溢出,所以会出现字体重叠的现象。

    那这个问题如何解决呢?

    解决方案:我们给 .mdse-detail 下的 p 元素设定样式属性 line-height:1.4

    为什么解决方案里的 1.4 不带单位?

    元素的 line-height 属性值会继承父元素(或祖先元素)的 line-height 属性值,如果属性值有单位,则继承的值是换算后具体的 px 值而非原始的值(比如:em、%),而如果属性值没有单位,则浏览器会继承数值(无单位),然后根据该元素的 font-size 值重新解析得到新的 line-height 值。这个和 table 的 tr 设置 display 属性有一点点类似(tr.style.display = ”;,IE 显示 block,而 Firefox 等标准浏览器显示 table-row)。

    还有另外一个相对低效的方法,但也不失为一个快捷的解决方案:

    .mdse-detail p * {
        line
    -height:140%;
    }

    参考阅读:《Unitless line-heights》

  • 相关阅读:
    结队-贪吃蛇游戏-项目进度
    团队-象棋游戏-开发环境搭建过程
    团队-中国象棋游戏-设计文档
    结对-贪吃蛇游戏-开发环境搭建过程
    结对-结对编项目贪吃蛇-设计文档
    课后作业-阅读任务-阅读提问-1
    《20170911-构建之法:现代软件工程-阅读笔记》
    团队-中国象棋-成员简介及分工
    团队-团队编程项目中国象棋-需求分析
    结队-结队编程项目贪吃蛇--需求分析
  • 原文地址:https://www.cnblogs.com/c9log/p/1634492.html
Copyright © 2011-2022 走看看