<!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. offices 激活

    http://www.xitongcheng.com/jiaocheng/dnrj_article_44577.html  破解工具见cnblos文件中 : https://blog.csdn.net ...

  2. 【JavaService】使用Java编写部署windows服务

    如果你玩windows系统,你对服务这个东西并不会陌生,服务可以帮我们做很多事情,在不影响用户正常工作的情况下,可以完成很多我们需要的需求. 众所周知,微软的visio studio内置的Servic ...

  3. 【Webpack2.X笔记】 配合react项目进行配置

    前言: 本文是自己在工作中使用webpack进行react开发项目构建的一些经验总结,做以记录防范后续踩坑. 如果您还没有webpack相关基础,请先移步 入门Webpack,看这篇就够了 进行基础学 ...

  4. jQuery3 slim版本和普通版本区别,如何选择?

    区别概述: slim即简化版,比普通版本缺少Ajax和特效模块模块. 官方发布地址:http://blog.jquery.com/2017/03/20/jquery-3-2-1-now-availab ...

  5. Luogu5162 WD与积木（生成函数+多项式求逆）

    显然的做法是求出斯特林数,但没有什么优化空间. 考虑一种暴力dp,即设f[i]为i块积木的所有方案层数之和,g[i]为i块积木的方案数.转移时枚举第一层是哪些积木,于是有f[i]=g[i]+ΣC(i, ...

  6. P2622 关灯问题II

    题目描述 现有n盏灯,以及m个按钮.每个按钮可以同时控制这n盏灯——按下了第i个按钮,对于所有的灯都有一个效果.按下i按钮对于第j盏灯,是下面3中效果之一:如果a[i][j]为1,那么当这盏灯开了的时 ...

  7. MySQL5.7安装(RPM)笔记

    1. 检查MySQL是否安装,如果有安装,则移除(rpm –e 名称)[root@localhost ~]# rpm -qa | grep -i mysqlmysql-libs-xxxxxxxxxx. ...

  8. 异步查询json传日期格式到前台，变成了时间戳的格式

    问题: 使用mybatis 查询mysql数据库,其中一个日期格式的字段,由异步查询使用 json传递到前台,变成了时间戳,而不是日期格式了.如何使查询出的日期展示成日期格式呢 解决办法: 1.尝试使 ...

  9. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  10. Java: ByteBuffer在多线程中使用需要注意

    昨天我改写一个文件缓存方面程序时,用ByteBuffer替换以前用的byte[],在测试的时候抛出异常. 以前的相关代码: class A { byte[] data; ....... public  ...