<!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. jar 命令详解

    jar 是随 JDK 安装的,在 JDK 安装目录下的 bin 目录中,Windows 下文件名为 jar.exe,Linux 下文件名为 jar.它的运行需要用到 JDK 安装目录下 lib 目录中 ...

  2. 打包spring项目遇到的坑 Unable to locate Spring NamespaceHandler for XML schema ……shcema/context 产生的原因及解决方法

    图1 图2 问题原因:导致该问题的原因就是打包的时候,同时将 spring-context 和 spring-aop包提取到了我们的程序应用的包中,在package过程中,这2个依赖包的 XML sc ...

  3. Ubuntu18.04 安装后的简单实用设置[未完成]

    1. 安装完成. 2. 更新 sudo apt-get update 3. 修改vi 放置键盘错位的问题 编辑文件/etc/vim/vimrc.tiny 将“compatible”改成“nocompa ...

  4. day3——关于<s:if/>和文件上传

    一个小的注意点 <s:if test='#backyear==#yearatd'>selected="selected"</s:if> <s:if t ...

  5. Java时间的转换

    String DATE_FORMAT = "yyyy-MM-dd"; LocalDate localDate = LocalDate.now(); long startTime = ...

  6. 【Mysql】根据时间去除重复数据

    SELECT a.project_id,a.user_id,a.app_version,a.src_system,a.channel,a.thedate FROM rpt_innoreport_luc ...

  7. [代码]--ORA-01745: 无效的主机/绑定变量名 ORA-00917: 缺失的逗号 oracle日期格式错误

    今天在oracle中执行插入语句的时候报了一个奇怪的错误,在程序中报的错误是ORA-01745: 无效的主机/绑定变量名,网上一查说是缺失逗号,在查询分析器执行的时候报缺失的逗号,仔细看了一下也没有缺 ...

  8. MT【78】几张动态图

  9. stm32的双向io口

    # stm的io设置为双向问题,将io端口模式配置为 open-drain mode > 在io端口配置为输出模式时,输入通道上的施密特触发器一直是打开的,所以读取IDR是能检测到端口电平的 & ...

  10. plsql批量导入sql文件

    背景:有时候在两个数据库之间导入导出数据,不可避免的需要进行sql文件的批量导入,一个个导入效率太低,所以可以考虑批量导入的办法进行导入. 操作步骤 1.假设有三个sql脚本,分别为aa.sql,bb ...