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

我們在制作網頁時,有時會希望一個元素既能像 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。

跨浏覽器的 inline-block 實現[CSS]
最近在爲自己做個新站,想到了些效果,實現時碰到了些小麻煩,比如這個 inline block。所幸大多數問題都解決了,所以寫出來分享一下。我們在制作網頁時,有時會希望一個元素既能像 block 一樣定義寬度和高度,又可以...查看完整版>>跨浏覽器的 inline-block 實現[CSS]
 
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 資源浏覽器的實現
 
用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...查看完整版>>網頁中實現浏覽器的最大,最小化和關閉按鈕
 
在IE7下生成高質量的CSS縮略圖-網頁浏覽
  在前端開發中,我們經常遇到這樣的情況:服務器傳到前端的圖片需要縮小以顯示(如下),在將其縮放之後,IE中圖片效果不容樂觀。    <img class="thumb" src="pic.jpg" alt="This image is really 500x500 ...查看完整版>>在IE7下生成高質量的CSS縮略圖-網頁浏覽
 
浏覽器不能正常解析CSS代碼的解決-css設計
  網頁采用了UTF-8編碼格式,這本來沒有問題,問題是外部CSS文件默認是 ANSI編碼,並沒有保存爲UTF-8格式。可能你會發現在一般情況下這樣也是沒有問題的,然而當CSS文件中包含有中文注釋時就可能不盡如人意了!  ...查看完整版>>浏覽器不能正常解析CSS代碼的解決-css設計
 
CSS讓你的IE浏覽器崩潰
嚴格來說不是光CSS就能令IE浏覽器崩潰(crash),而要配合一定的XHTML架構。到現時爲止發現有兩種寫法的代碼分別會令IE6、IE7崩潰,至于原因我嘗試尋找過答案但至今還沒找到…如你有這方面的認識或更詳細的資料很希望你...查看完整版>>CSS讓你的IE浏覽器崩潰
 
 
回到王朝網路移動版首頁