跨浏覽器的 inline-block 實現[CSS]

最近在爲自己做個新站,想到了些效果,實現時碰到了些小麻煩,比如這個 inline block。所幸大多數問題都解決了,所以寫出來分享一下。

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

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

<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。

CSS中跨浏覽器的inline-block實現
CSS中跨浏覽器的inline-block實現
我們在制作網頁時,有時會希望一個元素既能像 block 一樣定義寬度和高度,又可以像普通的 inline 一樣不斷行。例如下面這張圖片中紅線標出的地方: 通常我們實現這樣的效果會使用這樣的代碼:<a href=”#”>...查看完整版>>CSS中跨浏覽器的inline-block實現
 
Internet Cache 資源浏覽器的實現
摘要:Internet Cache 資源浏覽器的實現 這是我原來的BLOG中的一篇文章,但是當時不會貼圖,就一直沒有寫下去。 最近經常浏覽一些非常精美的圖片,尤其是一些BBS和貼吧裏有大量的圖,包括一些手機玲聲。下載比較麻煩...查看完整版>>Internet Cache 資源浏覽器的實現
 
ASP.NET實現Cache浏覽器的管理
對Cache進行浏覽並管理。 <%@ Page Language="<a href="http://dev.21tx.com/dotnet/csharp/" target="_blank">C#</a>" EnableViewState = "true"%> <%@ import Namespace="System" %&g...查看完整版>>ASP.NET實現Cache浏覽器的管理
 
Internet Cache 資源浏覽器的實現
這是我原來的BLOG中的一篇文章,但是當時不會貼圖,就一直沒有寫下去。最近經常浏覽一些非常精美的圖片,尤其是一些BBS和貼吧裏有大量的圖,包括一些手機玲聲。下載比較麻煩,一一保存又影響觀賞,因此寫了個程序來處...查看完整版>>Internet Cache 資源浏覽器的實現
 
兼容浏覽器的網頁細線表格設計-css設計
細線表格如果單純設置邊框,很難保證浏覽器兼容。常見的做法是利用 CSS2 的 "border-collapse:collapse;" 屬性合並表格邊框;並對 table 元素設置左邊框和上邊框,對 th 和 td 元素設置右邊框和下邊框。Markup:&...查看完整版>>兼容浏覽器的網頁細線表格設計-css設計
 
用css編寫的適合標准浏覽器的無限分級彈出菜單
  一直以來,我們大多使用js來實現彈出菜單,可是根據 w3c 的css標准,根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。  沒錯,就是利用 Element:hover 這個僞類。  注意,浏...查看完整版>>用css編寫的適合標准浏覽器的無限分級彈出菜單
 
用ASP實現禁用浏覽器的後退按鈕
  浏覽器的後退按鈕使得我們能夠方便地返回以前訪問過的頁面,它無疑非常有用。但有時候我們不得不關閉這個功能,以防止用戶打亂預定的頁面訪問次序。本文介紹網絡上可找到的各種禁用浏覽器後退按鈕方案,分析它們...查看完整版>>用ASP實現禁用浏覽器的後退按鈕
 
網頁中實現浏覽器的最大,最小化和關閉按鈕
<html><head><title>測試頁面</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><OBJECT id="min" type="application/x-ol...查看完整版>>網頁中實現浏覽器的最大,最小化和關閉按鈕
 
CSS選擇器的優先級
關于CSS選擇器優先級,目前國內已有很多人進行過解釋,但感覺不如人意,特別對于初學者,更是難以理解。這裏我把W3C上所描述的規範以我的理解再解釋一下,希望能給大家提供到幫助。在Calculating a selector’s spec...查看完整版>>CSS選擇器的優先級
 
 
回到王朝網路移動版首頁