1.將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。
2.然而最流行的IE和Firefox卻不支持這個屬性(在Firefox3版本中將會支持),不過Firefox下卻又私有屬性-moz-inline-box和inline-block形似,為什么是“形似”而不是“神似”呢?這是因為使用-moz-inline-box會帶來很多意想不到的后遺癥,例如使用這屬性后,text-align有時候就會有問題,還得改用Firefox的私有屬性-moz-box-align來解決。所以最好不要用Firefox使用私有屬性-moz-inline-box。
3.有一點是在ie對a或者span等內聯元素使用inline-block屬性表現是有效的,其實是ie使用display:inlie-block后會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表現。所以ie的塊元素使用display:inline-block后就無法實現效果,因為這時塊元素僅僅是被display:inline-block觸發了layout,而塊元素本來就是行布局。
4.那么ie下塊元素如何實現display:inlie-block的效果?
有兩種方法:
一.先使用display:inline-block屬性觸發塊元素,然后再定義display:inlie-block,讓塊元素呈遞為內聯對象(注:兩個display要先后放在兩個css聲明才有效果,這時ie的一個經典bug,如果先定義了display:inline-block,然后再講display設回inline或block,layuot不會消失。)
代碼:
div{display:inline-block;}
div{display:inline;}
二.直接讓塊元素設置為內聯對象呈遞(設置屬性display:inline),然后觸發塊元素的layout(如zoom:1等)。
代碼:
div{display:inline;zoom:1;}
下一篇:Ajax基本用法