标记语言——图片替换(3)

方法B: Leahy / Langridge 图片替换法 (LIR)

同时被 Seamus Leahy(http://www.moronicbajebus.com/playground/cssplay/imagereplacement/)与Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)发展出来,LIR法的目标是处理图片替换问题,而不需要用上FIR里无意义但又必要的<span>标签.

LIR不用display属性隐藏文字,而是把外包元素的高度(在这个例子中是<h1>)设为0,并将padding-top设成与替换图片高度相同,把文字挤开.

标记源代码和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像素,因此把上内部定设定为相同的数值.对大多数浏览器来说,我们把高度设为0,就等于把文字(或是包含在<h1>之内的其他任何东西)完全去掉了,我们用!important规则,确保取用这个值而不是使用之后的值(只给IE5 for Windows使用),符合规范的浏览器会忽略第二个height规则,但是IE5 for Windows会取用它.

凄惨的盒模型

最后一个规则会修正IE 5 for Windows错误解析CSS盒模型的问题(参见第十二章 "盒模型问题").由于IE5 for Windows会把内补丁累加在宽度,高度之内,因此需要特别为这个浏览器提供矫正过的数值.

在这个例子里,高度等于替换用的图片高度.

缺点

虽然方法B能够丢掉多余的<span>标签(修正标记源代码向来就是好事),但是它与方法A有个相同的缺点,那就是关掉图片,启用CSS的使用者啥都看不到.

另一个LIR的缺点,就是需要盒模型Hack才能使IE5 for Windows正常运作.

由于方法B没有使用display属性隐藏文字,因此我们能假设这个方法对使用屏幕阅读器的人来说是个比较好的选择.但是与方法A一样,Leahy / Langridge法使用时也要注意,要考虑"关闭图片显示 / 启用 CSS"时的可用性.

接着再来看一个由Mike Rundle发现的图片替换法变形.