首页 > 代码库 > [转]CSS: inline-block的应用和float块高度塌陷

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

2024-07-23 22:18:39   222人阅读

普通流高度塌陷：
当块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 伪元素。在IE6、IE7中需要出发hasLayout，例如zoom:1。
 
 inline-block
 代码：
　　display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */　　*display:inline; /* IE6、7 block 元素 */　　*zoom:1;

注：*是CSS hack 告知IE6、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;
  • IE6、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。

 

在IE6 IE7中不产生空格原因：

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

 

具体步骤：

第一步：使用 font-size:0

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

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

第二步：可以用letter-spacing:负值来调整

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

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

letter-spacing 和 word-spacing 同时使用可能导致冲突，所以我们需要在 IE6、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;/* IE6、7 */

 

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

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

子元素代码：

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

 

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

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


联系
我们