CSS: inline-block的应用和float块高度塌陷

普通流高度塌陷：

当块float浮动时，不会对块布局产生影响，块仍然会按照左右或者上下的顺序排列。可是会影响文档的排列，当文档的高度超过块的高度时，块的高度会产生塌陷现象。

 

高度塌陷解决方法：

 

闭合浮动：

1.在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”>

2.<br clear="all" />原理相似上面

3.父元素设置 overflow:hidden; 在IE6中须要出发hasLayout，例如zoom:1。缺点： 会隐藏超太高度内容，同时有可能致使中键失灵

4.父元素设置 overflow：auto; 缺点：firefox某些状况会形成内容全选；IE中 mouseover 形成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无端产生focus等。

5.父元素设置浮动。缺点：父级相邻元素产生影响。

6.父元素设置 dispaly:table。缺点：盒模型发生改变

7.使用:after 伪元素。在IE六、IE7中须要出发hasLayout，例如zoom:1。

 

 inline-block

 代码：

　　display:inline-block; /* 现代浏览器 +IE六、7 inline 元素 */
　　*display:inline; /* IE六、7 block 元素 */
　　*zoom:1;

注：*是CSS hack 告知IE六、IE7调用

原理：

inline-block 的元素既具备 block 元素能够设置宽高的特性，同时又具备 inline 元素默认不换行的特性。固然不单单是这些特性，好比 inline-block 元素也能够设置 vertical-align 属性。

 

应用：

<ul><li>能够不用浮动来同行显示，能够用display:inline-block;实现，可是会产生间隙。

这是因为一般状况下，存在多个连续的空白符（空格，换行符，回车符等），浏览器会将他们合并为一个空白符。

 

解决办法：

HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是受 font-size 来控制的，因此认为空隙是固定的想法是错误的。因此调整空隙能够用font-size:0。当对与chorme这样的早期浏览器有最小字大小时（自chorme19后就支持font-size:0），咱们能够用 -webkit-text-size-adjust:none来设置，可是会直接致使页面文字没法缩放，这对于用户来讲显然是不友好的，因此要确保使用地方没有大面积文字。

• Safari 5 依旧不支持 font-size:0 。6支持
• Firefox12，Opera 10 ，此次表现不错，支持 font-size:0 。
• IE8 以上支持 font-size:0;
• IE六、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。

 

在IE6 IE7中不产生空格缘由：

那么为什么 IE六、7 block 元素没有产生空隙呢？其实前面也提到了 IE 的 hasLayout，具备独立性，因此产生 hasLayout 的元素之间表现出来互不影响，这也再次代表 IE六、7 中的 inline-block 不能等同于 CSS2.1 中的 inline-block。

 

具体步骤：

第一步：使用 font-size:0

经测试发现，chrome、firefox、IE8+、opera，inline 或 block 元素都没有空隙了；

IE六、七、8（Q），inline 元素 inline-block 后始终存在 1px 左右的空隙。

第二步：能够用letter-spacing:负值来调整

Safari 中 letter-spacing 负值的绝对值大于空隙大小后，内部会发生重叠。

第三步：word-spacing来调整IE6 7的1px 空隙

letter-spacing 和 word-spacing 同时使用可能致使冲突，因此咱们须要在 IE六、7 中 hack 掉 letter-spacing。

white-space：normal | pre | nowrap | pre-wrap | pre-line

 

默认值：normal

• normal：默认处理方式。
• pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅 pre 对象
• nowrap：强制在同一行内显示全部文本，直到文本结束或者遭遇 br 对象。
• pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

父元素代码：

 

font-size:0;/* 全部浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
*letter-spacing:normal;
word-spacing:-1px;/* IE六、7 */ 

 

第四部，以上都是对父元素操做，子元素要重置正常值

子元素字体大小为0了，子元素显示为空。同时字符间距和单词间距重置为默认值

子元素代码：

font-size: 12px; letter-spacing: normal; word-spacing: normal;」

 

 

原文地址： http://www.iyunlu.com/view/css-xhtml/64.html