<!DOCTYPE html>

 <html lang="zh">

 <head>

   <meta charset="UTF-8">

   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <title>Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">

   <style>

     *{

       padding: ;

       margin: ;

     }

     .test{

       width: 102px;

       margin-top: 100px;

       margin-left: 100px;

     }

     .test ul{

       overflow: hidden;

     }

     .test ul li{

       /*display: block;*/

       float: left;

       border: 1px solid #;

     }

     .test1{

       display: block;

       width: 100px;

       height: 50px;

       line-height: 50px;

       background-color: red;

       overflow: hidden;

     }

     .test1 p{

       float: left;

     }

   </style>

 </head>

 <body>

   <div class="test">

     <ul>

       <li>

         <div class="test1">

           <p>我发的是</p>

         </div>

       </li>

     </ul>

   </div>

 </body>

 </html>

给li里面的div设置overflow: hidden就会西湖此案这个问题

如果去掉overflow: hidden或者给li设置display:block或者display:inline-block就正常，不懂为什么

下面这个是网上找到的，但是和我遇到的问题还是有差距

转：https://my.oschina.net/u/214483/blog/663133

工作中遇到的一个问题，设置inline-block元素的overflow：hidden意外增加元素总体高度。

描述如下：

设 A为子容器，B为父容器。

A设置为inline-block，并且overflow为hidden，A高度为23，B高度为30。

A设置为block，A高度为23，B高度为23。

通过stackoverflow找到原因（http://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container），摘抄如下：

Let me explain to you why this is happening.

According to CSS 2.1 Specs,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

To explain in simple words,

i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line. ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.

So, in your case the inline-block cell has overflow:hidden (not VISIBLE), so its margin-bottom, the border of cell is at the baseline of the container element container.

That is why the element cell looks pushed upwards and the height of container appears increased. You can avoid that by setting cell to display:block.

翻译如下：

'inline-block'的baseline是其在normal flow中的最后一个line box的baseline，除非它没有in-flow line boxes，或者其‘overflow’属性不等于‘visible’，这种情况下，其baseline位于bottom margin边上。

解释如下：

i) 如果inline-block的overflow设为visible（默认属性），则其baseline是当前行的containing block的baseline。

ii) 如果overflow设为其他，则其bottom margin位于前行的containing block的baseline；

我们这种情况下，inline-block元素的overlow：hidden，所以元素的底部边框在父元素的baseline。

因此高度才会看起来增加了。

可以将inline-block设为block，即可解决问题。

关于overflow: hidden;的一个诡异问题的更多相关文章

  1. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  2. 特别的表格（overflow：hidden的一个小应用）

    做多个li,对各个边的边框有不同的要求,三层盒子,第一层盒子放li,设置右边和下边的虚线边框,浮动,第二层盒子ul设置宽度使li排列,第三层盒子最大的盒子,使用overflow:hidden,宽度高度 ...

  3. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  4. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  6. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  7. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  8. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

  9. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

随机推荐

  1. numpy教程

    [转]CS231n课程笔记翻译:Python Numpy教程 原文链接:https://zhuanlan.zhihu.com/p/20878530 译者注:本文智能单元首发,翻译自斯坦福CS231n课 ...

  2. js 中引用类型 的深拷贝 和 浅拷贝的区别

    一.曾经在读JQ源码的时候,对深拷贝算是有了一点的理解.我们在项目中是不是经常会遇到这样的问题呢? 后台返回一个数组对象(引用类型).次数在页面渲染中需要对部分数据进行处理 比如:银行卡6234509 ...

  3. 2013长春网赛1001 hdu 4759 Poker Shuffle

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4759 题意:有一堆2^n的牌,牌原先按(1,2,....k)排序,每一次洗牌都将牌分成两种情况:(1, ...

  4. 在vue中如何动态修改title标签的值

    建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...

  5. Java获取当前运行方法所在的类和方法名

    很简单,直接看代码: public void showClassAndMethod() { System.out.println(this.getClass().getSimpleName() + & ...

  6. 51nod 1480 打广告(二分+线段树)

    题意 给出n个区间和m个区间,从这n个区间里选一个区间a,这m个区间选一个区间b,使得a&b的长度*c最大. 思路 如果这n个区间里有一个区间包含另一个区间,那另外一个区间就可以忽略掉,进行\ ...

  7. 使用System.getProperty方法，如何配置JVM系统属性

    原创文章,欢迎转载,转载请注明出处! 很多时候我们需要在项目中读取外部属性文件,用到了System.getProperty("")方法.这个方法需要配置JVM系统属性,那么如何配置 ...

  8. FortiGate 硬件加速

    FortiGate 硬件加速 来源 https://wenku.baidu.com/view/07749195a1c7aa00b52acb63.html 硬件加速 来源 https://blog.cs ...

  9. How to 对拍？

    对拍从数学的统计学角度来说是一个好的方法,至少能在你竞赛中帮你拿回一些分--yzr大牛pas的对拍一开始还没写过,突然想学一下对拍.那么就学吧.dp水题(搜索):https://www.luogu.o ...

  10. Linq查询条件里有可空字段比较时报错variable '<>h__TransparentIdentifier2' of type referenced from scope '', but it is not defined

    当我运行下面的linq查询时报了这个错,   1: var result = (from so in svcContext.new_sales_orderSet 2: join soitem in s ...