|
方法B: Leahy / Langridge 圖片替換法 (LIR)
同時被 Seamus Leahy(http://www.moronicbajebus.com/playground/cssplay/imagereplacement/)與Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)發(fā)展出來,LIR法的目標是處理圖片替換問題,而不需要用上FIR里無意義但又必要的<span>標簽.
LIR不用display屬性隱藏文字,而是把外包元素的高度(在這個例子中是<h1>)設(shè)為0,并將padding-top設(shè)成與替換圖片高度相同,把文字擠開.
標記源代碼和CSS
由于這個方法不需要額外的<span>標簽,因此標記源代碼能縮減成:
<h1 id="lir">Leahy/Langridge Image Replacement</h1>
而把文字換成圖14-4中的圖片所需的CSS代碼全在下面這段聲明里:
#lir {
padding: 90px 0 0 0;
overflow: hidden;
background: url(lir.gif) no-repeat;
height: 0px !important; /* for most browsers */
height /**/:90px; /* for IE5/Win */
}
圖14-4 用圖片編輯器建立的lir.gif
用來替換掉文字的圖片高90像素,因此把上內(nèi)部定設(shè)定為相同的數(shù)值.對大多數(shù)瀏覽器來說,我們把高度設(shè)為0,就等于把文字(或是包含在<h1>之內(nèi)的其他任何東西)完全去掉了,我們用!important規(guī)則,確保取用這個值而不是使用之后的值(只給IE5 for Windows使用),符合規(guī)范的瀏覽器會忽略第二個height規(guī)則,但是IE5 for Windows會取用它.
凄慘的盒模型
最后一個規(guī)則會修正IE 5 for Windows錯誤解析CSS盒模型的問題(參見第十二章 "盒模型問題").由于IE5 for Windows會把內(nèi)補丁累加在寬度,高度之內(nèi),因此需要特別為這個瀏覽器提供矯正過的數(shù)值.
在這個例子里,高度等于替換用的圖片高度.
缺點
雖然方法B能夠丟掉多余的<span>標簽(修正標記源代碼向來就是好事),但是它與方法A有個相同的缺點,那就是關(guān)掉圖片,啟用CSS的使用者啥都看不到.
另一個LIR的缺點,就是需要盒模型Hack才能使IE5 for Windows正常運作.
由于方法B沒有使用display屬性隱藏文字,因此我們能假設(shè)這個方法對使用屏幕閱讀器的人來說是個比較好的選擇.但是與方法A一樣,Leahy / Langridge法使用時也要注意,要考慮"關(guān)閉圖片顯示 / 啟用 CSS"時的可用性.
接著再來看一個由Mike Rundle發(fā)現(xiàn)的圖片替換法變形.
出處：藍色理想
責任編輯：bluehearts
上一頁 標記語言——圖片替換 [2] 下一頁 標記語言——圖片替換 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 標記語言——圖片替換 [3]
