如何練就優(yōu)秀的項(xiàng)目體驗(yàn)
創(chuàng)意、流程、執(zhí)行缺一不可
CREATIVITY, PROCESS, PERFORM INDISPENSABLE
深入理解inline-block
2016-09-13
diplay:inlie-block

    1.將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象,但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi),允許空格。

    2.然而最流行的IE和Firefox卻不支持這個(gè)屬性(在Firefox3版本中將會(huì)支持),不過(guò)Firefox下卻又私有屬性-moz-inline-box和inline-block形似,為什么是“形似”而不是“神似”呢?這是因?yàn)槭褂?moz-inline-box會(huì)帶來(lái)很多意想不到的后遺癥,例如使用這屬性后,text-align有時(shí)候就會(huì)有問(wèn)題,還得改用Firefox的私有屬性-moz-box-align來(lái)解決。所以最好不要用Firefox使用私有屬性-moz-inline-box。

    3.有一點(diǎn)是在ie對(duì)a或者span等內(nèi)聯(lián)元素使用inline-block屬性表現(xiàn)是有效的,其實(shí)是ie使用display:inlie-block后會(huì)觸發(fā)layout,從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表現(xiàn)。所以ie的塊元素使用display:inline-block后就無(wú)法實(shí)現(xiàn)效果,因?yàn)檫@時(shí)塊元素僅僅是被display:inline-block觸發(fā)了layout,而塊元素本來(lái)就是行布局。

    4.那么ie下塊元素如何實(shí)現(xiàn)display:inlie-block的效果?

    有兩種方法:

一.先使用display:inline-block屬性觸發(fā)塊元素,然后再定義display:inlie-block,讓塊元素呈遞為內(nèi)聯(lián)對(duì)象(注:兩個(gè)display要先后放在兩個(gè)css聲明才有效果,這時(shí)ie的一個(gè)經(jīng)典bug,如果先定義了display:inline-block,然后再講display設(shè)回inline或block,layuot不會(huì)消失。)

    代碼:

    div{display:inline-block;}

    div{display:inline;}

二.直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞(設(shè)置屬性display:inline),然后觸發(fā)塊元素的layout(如zoom:1等)。

    代碼:

    div{display:inline;zoom:1;}

CONTACT US
  • 服務(wù)熱線:18664767192
  • 廣州技術(shù)總部:廣州市天河區(qū)天河北路179號(hào)尚層國(guó)際21層
  • 郵箱:admin@bangju.com
掃一掃加客服微信