inline-block 属性分析
来源:互联网 发布:java入门简明教程 编辑:程序博客网 时间:2024/06/14 06:10
inline-block 属性分析2010-03-23摘錄:http://www.keakon.net/2009/11/21/inline-block%E7%9A%84%E4%BD%BF%E7%94%A8%E5%8F%8Abugie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin,(关于padding,情况有点特殊,在ie6,7中inline元素是无法设置上下padding的,但是在标准浏览器里面是可以设置上下padding的)。鉴于inline元素的这种特性,如果我们不浮动并且想让li显示在一行,而且可以设置高度,宽度以及上下margin,上下padding等属性,应该怎么办呢?你一定会想到一个属性display:inline-block;对!”inline-block”就是干这个事的,让一个元素既不换行又具有block元素的特性。不过有点小问题,让我们看代码:view sourceprint?01 02 03 04 05 display-block 06 07 ul {background:#ccc;padding:0;margin:0;list-style:none;} 08 li {display:inline-block; 09 width:80px; 10 height:20px; 11 margin:10px; 12 padding:10px; 13 text-align:center; 14 background:#cfc;} 15 16 17 18 display-block 06 07 span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;} 08 09 10 11 span 12 13 可以看到在ie6,7中inline元素span已经表现得和一个display:inline-block元素一摸一样了,但是在标准浏览器中span仍然是行内元素(宽高以及上下margin都无效)。如果声明了不正确DTD,导致ie6在quirks 模式下解析,那么ie6会自动触发inline元素的haslayout,不过这里只讨论正常情况下的解析,所以加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout,之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性,设置为其他值会导致元素在ie下变形,设置为1既是保持原形不缩放。了解了上面的情况,我们就可以来解决之前那个问题了。可以改原先的css代码如下:view sourceprint?01 li {display:inline-block; /* firefox等标准浏览器识别*/ 02 *display:inline; /* 只有ie6和ie7识别*/ 03 zoom:1; /* 触发ie6和ie7下的haslayout */ 04 width:80px; 05 height:20px; 06 margin:10px; 07 padding:10px; 08 text-align:center; 09 background:#cfc; 10 } 让标准浏览器识别display:inline-block;让ie6,7识别display:inline;来覆盖上面的display:inline-block;(我为什么要说”覆盖”?)。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。view sourceprint?01 02 03 04 05 display-block 06 07 ul {background:#ccc;padding:0;margin:0;list-style:none;} 08 li {display:inline-block; 09 *display:inline; 10 zoom:1; 11 width:80px; 12 height:20px; 13 margin:10px; 14 padding:10px; 15 text-align:center; 16 background:#cfc; 17 } 18 19 20 21 display-block 06 07 span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;display:inline-block;} 08 09 10 11 span 12 13 可以看到,我们把zoom:1换成了display:inline-block以后,在ie6,7中span仍然和firefox等标准浏览器下一样,具有了设置的宽高和上下margin,上下padding。它表现得和display:inline-block同学一样好,不过这并不是因为display:inline-block这条声明直接生效了,而是因为display:inline-block触发了ie的haslayout属性,使得inline元素具有了inline-block的表现。
- 19
- 测试 20
- 测试 21
- 测试 22
- 测试 23
- 22
- 测试 23
- 测试 24
- 测试 25
- 测试 26
- inline-block 属性分析
- display:inline-block属性
- display:inline-block属性
- display属性值:block,inline-block,inline
- display属性 inline block inline-block区别
- css display属性:inline、block、inline-block
- CSS的Inline、Block属性
- 兼容性的 inline-block 属性
- css display:inline-block属性
- display的inline-block属性
- display属性的block,inline和inline-block
- CSS中样式 display 属性 inline,block及inline-block
- CSS中样式 display 属性 inline,block及inline-block
- display属性值之block、inline和inline-block
- CSS中样式 display 属性 inline,block及inline-block
- CSS中样式 display 属性 inline,block及inline-block
- css属性-display:inline、block、inline-block的区别
- css中display属性inline,block,inline-block详解
- ★★★ Visual Studio 2008 每日小窍门 【持续发布ing~】 Tips:023
- ADO.NET中不能把0作为值传给SQL参数?
- 汇编语言与C语言的接口技术
- containof和list_entry的实现方式
- QT编辑框的下拉提示
- inline-block 属性分析
- HTML滚动条制作,怎么去除IE页面滚动条
- 如何检测数据库服务器存在与否?
- Delphi编程使用HOOK监视Windows
- C++ placement new
- 如何用C#为SQL Server数据库创建一个新表?
- 杂七八
- 怎样从Excel文件将数据导入到SQL Server数据库?
- 怎样通过C#运行一个.sql的脚本文件?