模擬實現inline block效果

2022-01-14 17:45:34 字數 1143 閱讀 5616

display:inline-block

將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。

但對於這個屬性不是所有瀏覽器都識別。

支援的瀏覽器有:opera、safari。

但很遺憾,最流行的 ie 6不支援 display:inline-block 屬性,表示疑問或者反對。說:「我在 ie 中對 a 或者 span 等內聯元素使用 display:inline-block 一直是有效的」。

其實不然,在ie中對內聯元素使用 display:inline-block,ie 是不識別的,但使用 display:inline-block 在 ie 下會觸發 layout,從而使內聯元素擁有了display:inline-block 屬性的表症。從上面的這個分析,也不難理解為什麼 ie 下,對塊元素設定 display:inline-block 屬性無法實現 inline-block 的效果。這時塊元素僅僅是被 display:inline-block 觸發了 layout,而它本就是行布局,所以觸發後,塊元素依然還是行布局,而不會如 opera 中塊元素呈遞為內聯物件。

延伸乙個問題:ie下塊元素如何實現 display:inline-block 的效果?

有兩種方法:

1、先使用 display:inline-block 屬性觸發塊元素,然後再定義 display:inline,讓塊元素呈遞為內聯物件(兩個display 要先後放在兩個 css 宣告中才有效果,這是 ie 的乙個經典 bug ,如果先定義了 display:inline-block,然後再將 display 設回 inline 或 block,layout 不會消失)。**如下(…為省略的其他屬性內容):

div 

div

2、直接讓塊元素設定為內聯物件呈遞(設定屬性 display:inline),然後觸發塊元素的 layout(如:zoom:1 等)。**如下:

div 

以下**模擬實現大多瀏覽器共用效果

display:inline-block; /* ff ie7 ie8等使用 */

zoom:1; /* ie6使用 */

*display:inline; /* ie6使用 */

模擬實現Spring IOC

通過在類上標註 registration 註冊進容器,injection從容器注入物件 容器類 public class springcontainer else bean.setbeanclass c mappropsmap new hashmap 處理注入屬性 field props c.get...

模擬實現strcmp

函式簡介 原型 int strcmp const char s1,const char s2 所在標頭檔案 string.h 功能 比較字串s1和s2。一般形式 strcmp 字串1,字串2 說明 當s1注意不是 1 當s1 s2時,返回值 0 當s1 s2時,返回正數 注意不是1 如下 int m...

模擬實現strncat

模擬實現strncat 在系統庫函式中,存在strncat這個函式,它用於字串的追加,就是在乙個字串後面再追加乙個字串,它的函式原型為 char strncat char strdest,const char strsource,size t count 在其中,strdest為目標字串,strso...