zoukankan      html  css  js  c++  java
  • 认真学习CSS3-问题收集-101号-莫名其妙的row行高

    其他人都有事情,有些事情只好自己上阵,自己做,最踏实!

    做了两个基本一样的页面,都是采用bootsrap+jquey+js的技术,业务内容就是简单的查询,加上一些简单的效果,没有啥特别的内容。

    由于历史的缘故,css有点乱,因为这两个页面可以看作是重写的页面。

    问题来了!

    页面a的table中行高比较正常,大概是40px左右,而b的行高是50px左右。

    用浏览器开发工具检查了半天,代码也看了半天,看不出什么差异。

    又试验了调试,手动在调试器上修改样式:

    table tr{

      height:40px !important;

    }

    依然无效。

    忽然想起哪里的文章,可能是以下的情形之一:

    1.全局样式,或者是父亲容器的样式导致容器本身尺寸不可修改

    2.容器/盒子内部的元素导致容器/盒子不可收缩

    第1种,可能性比较小,因为已经!important,且没有什么特别的js会动态调整他们的高度。

    又细细看了每个列,终于发现问题所在:

    b的一个列有formatter,formatter返回的内容大概如下:

    return "<label>"+value+"</label>";

    而这个label并不是老老实实的使用默认的样式来展示自己,居然多了个margin-bottom属性,值自然不是0px。

    工具并没有说明这个附加的样式是如何来的(毕竟工具也不是万能的),于是只好覆盖:

    td label{
     margin-bottom:0px !important;
    }

    先了了再说,后面有空,再看看这个是怎么导致的。

    那么在什么情况下,外容器是无法调整自身大小的呢?下面我做了几个实验。主要是根据display,position几个属性来调整(明日继续)

  • 相关阅读:
    20200924-3 单元测试,结对
    20200924-1 每周例行报告
    20200924-5 四则运算试题生成,结对
    20200924-2 功能测试
    20200924-4 代码规范,结对要求
    20200929-git地址
    20200917-1 每周例行报告
    20200917-2 词频统计
    20200917-3 白名单
    20200910-2 博客作业
  • 原文地址:https://www.cnblogs.com/lzfhope/p/15245135.html
Copyright © 2011-2022 走看看