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

[转]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 伪元素。在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块高度塌陷