關於overflow: hidden;的一個詭異問題
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 .test{ 14 width: 102px; 15 margin-top: 100px; 16 margin-left: 100px; 17 } 18 .test ul{ 19 overflow: hidden; 20 } 21 .test ul li{ 22 /*display: block;*/ 23 float: left;24 border: 1px solid #000000; 25 } 26 .test1{ 27 display: block; 28 width: 100px; 29 height: 50px; 30 line-height: 50px; 31 background-color: red; 32 overflow: hidden; 33 } 34 .test1 p{ 35 float: left; 36 } 37 </style> 38 </head> 39<body> 40 <div class="test"> 41 <ul> 42 <li> 43 <div class="test1"> 44 <p>我發的是</p> 45 </div> 46 </li> 47 </ul> 48 </div> 49 </body> 50 </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;的一個詭異問題