CSS, CSS2, 網頁設計

CSS教學-inline-block與block二者差異並且IE6也可支援

梅干 2009/11/27
梅問題-CSS教學-iline-block與block二者差異
  最近身旁有不少好友,紛紛的投入CSS的懷抱中,但卻都為此感到苦腦,對它更是又愛又恨,時常A瀏覽器作好,B瀏覽器又跑掉,這真的是令人感到很苦腦,今天要為各位來分享,inline-blockblock二者的差異,二個都是區塊,為何又多了一個inline,其實簡單的來說就是,inline-block會隨著區塊中的文字多寡,把區塊撐開來,block的話設定多大就多大,假設把寬設成200px時,當文字超過200px就會自動換行,相信各位應該可以很清楚的知道二者的差異,但怪事又發生了怎在IE6卻失效,其主要的原因在於IE6並不認得inline-block,因此在IE6若要使用時,就得個別作設定才行,接下來就為各位來介紹,如何在IE6也可實現inline-block的夢想。

IE6下使用inline-block

 border:solid 5px #333333;
 padding:10px;
 display:inline-block;
 float:left;
 margin-right:10px;
}

.inline{*display:inline;}

.noinline{ border:solid 5px red; padding:10px; width:250px; float:left;}

語法解說:
由於IE6並不認得inline-block,因此可看到,第一個inline中的display已用inline-block,第二個inline則要把display設成inline,這時在IE6下就可使用inline-block了,但這邊得特別注意到順序問題,若經常有些東西無緣無故跑掉時,一般都是區塊互擠的問題居多。

[範例預覽]