我当时回答的是,二者均能实现隐藏元素,但是将元素设置为display:none;之后,会同时取消该元素之前占据的文档流空间,但是visibility:hidden;使得该元素即使不显示,但是依旧会占据空间。
当时是电话面试,我回答了之后,对方也没有再继续问与display相关的知识。
现在想起来,真的是庆幸,如果人家问我与display相关的知识,display:inline-block使用时需要注意的地方。我肯定也打不上来。
前几天练习写导航时,由于总需要将一些行内元素或块级元素设置成为行内块级元素,所以我就想到display:inline-block
但是,我发现这是个属性值还是有些学问的。推荐这篇文章。
IE5.5开始,就已经开始支持inline-block,但是要知道IE5.5是在2000年正式推出,但是W3C在2002年才开始将这个属性值加到css2.1草案中。
IE 5.5、6、7 、8(Q)中 块级元素对 inline-block 支持不完整,如果要达到类似的效果,需要先设置为 display:inline,然后使用 zoom:1 等触发
hasLayout
(这个是引起IE浏览器出现bug的原因,我会再详细写的)。IE 5.5、6、7 、8(Q)中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。
-
以下都是针对IE 5.5、6、7 、8(Q)浏览器而言
-
行内元素 display:inline-block
只需要对行内元素进行display:inline-block,或者zoom:1;就可以触发hasLayout,然后就可以设置该行内元素的宽高。
display:inline-block;*
zoom:1;
在zoom前面加上*
是为了让该属性只针对ie浏览器才被识别。还有其他方法。这里细说 -
块级元素 display:inline-block
块级元素通过display:inline-block触发hasLayout,并不能使得该块级元素具备不换行的特性。这也正是支持不完整的体现,弥补方法:
display:inline; zoom:1;
首先转化为行内元素,然后再使他拥有布局。 -
结合现代浏览器当我们想使得一个元素转换为行内块级元素时,需要做的就是:
`display:inline-block;`/*兼容现代浏览器,IE6、7 行内元素*/ `*display:inline;`/*兼容IE6、7块级元素*/
*zoom:1
;