关于display:inline

quasiceo 2014-05-01

展开全文

关于display:inline-block

display:inline-block是个很有用的css属性。块级元素可以自由控制长宽，可是如果不浮动会独占一行，而一旦浮动，又会带来一系列的其它问题需要考虑，这就在一定程度上限制了对块级元素的使用。行内元素可以很自然地在一行内显示内容，只是长宽是无法随意设置的，这也限制了行内元素的使用。举个简单的例子说明，如果我们需要给一排内的几个a标签设置成一个按钮的样式，它有长宽，有背景色，有边框，几个按钮的后面是一些文字。我们用块级元素可以设长宽设背景，可以用浮动使它们排一行，可是还需要考虑清除浮动。我们也可以对a标签设置padding来让它看似有长宽，只是这个长宽我们就不好控制了，只能让它自适应，无法给它一个特定值。如果有一个特殊的display，既可以让它们在一行内显示，又可以设置长宽该多好。有的，就是display:inline-block；它集合了两者的长处于一身，是个非常好用的属性。可是因为IE对它的不支持，所以一直以来并没有得到广泛使用。事实上，display:inline-block还是可以在IE下实现的！只是，这个效果却是利用的hack。

　我们看一个简单的例子。

在IE6,IE7,IE8和FF下的截图分别如下：

IE6:

IE7:

IE8:

FF:

正常情况下，p内的12345会独占一行，显示在abcdefg下的，如果对p设置display:inline-block，它会显示在abcdefg后面，长宽设置保留。（如果设置成display:inline长宽就丢失了）。我们看到FF和IE8都可以正常解释display:inline-block，而IE6和IE7还不支持，所以为了兼容，我们必须舍弃这种用法。

刚才我说过了，可以用hack的方法让ie实现display:inline-block;这个hack就是大名鼎鼎的IE专用布局属性haslayout。对于一个拥有haslayout的元素，它是可以设置长宽的，哪怕它是行内元素。所以，上面的例子我们可以改变一下，改成这样：

我们再来看看它在几个浏览器下的效果：

IE6:

IE7:

IE8:

FF:

可以看到IE8和FF正常显示，IE6和IE7中span标签也有了长宽，并且显示在一行内。这不正是display:inline-block的表现吗？对我们的设置解释一下，display:inline-block并不是真的在IE6和IE7下生效了，他们只是令span拥有的布局，有了haslayout属性，其效果和设置zoom:1是一模一样的。在这里我们可以把display:inline-block改成zoom:1;可以看到IE6和IE7下效果仍然和现在一样，只是为了兼容IE8和FF，我们还是使用display:inline-block;既然这个属性可以让IE8和FF正确识别，又同时能让IE6和IE7有haslayout，为什么还要去另外设置zoom:1呢？哈。IE6和IE7显然不能正确识别display:inline-block;但并不代表它就无视这个属性了，这个属性可以触发haslayout。

ok，你也一定注意到了，IE6和IE7下，左边的文字abcdefg和span是底对齐的，而IE8和FF是顶对齐的，也就是说，我们对IE6,IE7的hack还不完美。这个可以通过设置span的vertical-align解决。比如这样：

我们对IE设置一个hack，* vertical-align:-10px;

看看效果：

IE6:

IE7:

IE8:

FF:

ok,这下实现兼容了。

说说这个方法不好的地方吧。它只能对行内元素实现display:inline-block;如果是块级元素就不行。所以，这就限制了我们能使用的标签只能是行内元素的标签，而因为dtd声明的关系，行内元素能嵌套的标签不多，这就限制了我们布局时标签的选择。如果我们需要在display:inline-block里面放块级元素，就只能对行内元素设置display:block来模拟了。比如说：

<span class="inlineBlock"><p></p></span> 错！

另外，这个方法中还用到了针对IE的hack, * vertical-aglign,这也是不好的，能不能hack就尽量不要使用hack，所以这个方法并不怎么值得推荐。可是实际项目中各种需求和情况都是可能发生的，所以，如果需要用到display:inline-block，可以通过这种方法实现。