| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS中跨浏覽器的inline-block實現

來源:互聯網  2008-10-17 07:02:06  評論

我們在制作網頁時,有時會希望一個元素既能像 block 一樣定義寬度和高度,又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標出的地方:


CSS中跨浏覽器的inline-block實現

通常我們實現這樣的效果會使用這樣的代碼:

<a href=」#」><img src=」….」 alt=」….」 /></a>

這樣雖然可以達到目的,但相對來說代碼還是不夠精煉,也不夠靈活。而理想的方式,我們僅通過下面的代碼即可實現:

<a href=」#」>Yangliu.name</a>

這樣一來,我們就需要對 a 標簽指定 width height 和 background-image。但 a 標簽默認的 display 屬性是 inline,width、height 是無效的。而如果對 a 設置 display:block,雖然可以解決寬度高度的問題,但元素會自動斷行,無法達到我們需要的效果。有沒有什麽方式可以實現類似 img 標簽那樣,既可以設定高度寬度,又不會自動斷行呢?

答案是肯定的。在 Opera 和 Webkit 中支持一個 CSS2 的屬性 display: inline-block。利用這個屬性,在 Opera 下即可完全實現我們所需的效果,但在其它浏覽器下就不行了。

display 屬性另外還有一個不太常用的值 display: inline-table。利用這個值也可以完全實現我們所需的效果。這個屬性被除了 IE 以外的所有浏覽器正確支持,但是…… 呃,又是 IE。雖然在面對 CSS 的時候所有 Web Developer 都會恨之入骨,但放棄 IE 就等于放棄 70% 的用戶,所以我們還是得找出其它的解決方案。

沒轍了,只好 Google,結果還真給我找到了。在這篇文章中指出,如果你首先觸發 IE 的 hasLayout,然後再設置它的 display: inline,這個元素將變爲 inline-block! 這樣一來,我們就可以利用 IE 這個不可理喻的特點,結合一些 CSS Hacks,給出兼容各種浏覽器的 CSS 代碼:

.element-class {

display: -moz-inline-stack; //Firefox only code

display: inline-block; //some standard browsers

zoom: 1; //IE only

*display: inline; //Only IE know this code (CSS Hack)

}

通過這樣的代碼就可以實現在各種浏覽器中表現一致的 inline-block 了。不過這種方式有個小缺憾,就是無法通過 W3C CSS 驗證。當然,要想通過驗證也很簡單,可以對除了 IE 之外的浏覽器發出 inline-table 屬性的樣式表,對于 IE 單獨發出一份 IE Only 的 CSS。

我們在制作網頁時,有時會希望一個元素既能像 block 一樣定義寬度和高度,又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標出的地方: [url=/bbs/detail_1861596.html][img]http://image.wangchao.net.cn/it/1323264920074.jpg[/img][/url] 通常我們實現這樣的效果會使用這樣的代碼: <a href=」#」><img src=」….」 alt=」….」 /></a> 這樣雖然可以達到目的,但相對來說代碼還是不夠精煉,也不夠靈活。而理想的方式,我們僅通過下面的代碼即可實現: <a href=」#」>Yangliu.name</a> 這樣一來,我們就需要對 a 標簽指定 width height 和 background-image。但 a 標簽默認的 display 屬性是 inline,width、height 是無效的。而如果對 a 設置 display:block,雖然可以解決寬度高度的問題,但元素會自動斷行,無法達到我們需要的效果。有沒有什麽方式可以實現類似 img 標簽那樣,既可以設定高度寬度,又不會自動斷行呢? 答案是肯定的。在 Opera 和 Webkit 中支持一個 CSS2 的屬性 display: inline-block。利用這個屬性,在 Opera 下即可完全實現我們所需的效果,但在其它浏覽器下就不行了。 display 屬性另外還有一個不太常用的值 display: inline-table。利用這個值也可以完全實現我們所需的效果。這個屬性被除了 IE 以外的所有浏覽器正確支持,但是…… 呃,又是 IE。雖然在面對 CSS 的時候所有 Web Developer 都會恨之入骨,但放棄 IE 就等于放棄 70% 的用戶,所以我們還是得找出其它的解決方案。 沒轍了,只好 Google,結果還真給我找到了。在這篇文章中指出,如果你首先觸發 IE 的 hasLayout,然後再設置它的 display: inline,這個元素將變爲 inline-block! 這樣一來,我們就可以利用 IE 這個不可理喻的特點,結合一些 CSS Hacks,給出兼容各種浏覽器的 CSS 代碼: .element-class { display: -moz-inline-stack; //Firefox only code display: inline-block; //some standard browsers zoom: 1; //IE only *display: inline; //Only IE know this code (CSS Hack) } 通過這樣的代碼就可以實現在各種浏覽器中表現一致的 inline-block 了。不過這種方式有個小缺憾,就是無法通過 W3C CSS 驗證。當然,要想通過驗證也很簡單,可以對除了 IE 之外的浏覽器發出 inline-table 屬性的樣式表,對于 IE 單獨發出一份 IE Only 的 CSS。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有