[翻译]标记语言和样式手册 Chapter 14 图片替换(3)
作者:zhaozy 来源:3user.com 发布时间:2008-02-18 12:56:00
方法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发现的图片替换法变形.
猜你喜欢
- 如何用Cookie进行登录验证?很简单,看看这两个文件:login.htm请注册登录随风起舞<FORM ACTION=&qu
- 看如下asp代码:<%@ codepage="65001" %><!-- 
- 请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库.一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据
- 省市级联这东西基本是网注一份,而且基本是全是js写的,js写唯一坏处就是JS无效时不可用,我所说的js无效包括不支持js,js加载未完成或者
- 以下示例显示如何在 XPath 查询中指定轴。这些示例中的 XPath 查询都在 SampleSchema1.xml 中所包含的映射架构上指
- 工作闲余,除抱有浓厚兴趣领域,我很不喜欢看些晦涩难懂的文字,于是想像茶余饭后的闲聊,随谈点话题。一次和一朋友吃饭聊天,随便聊到了他最近做的一
- 元素浮动导致的问题及解决办法大家都应该很熟悉了,举个简单的例子:<style type="text/css">
- 在跨业务、跨网站发送数据或者业务升级的时候,我们有的时候需要指定发送数据的编码方式,比如页面是utf-8编码的,而发送出去的数据却是GB23
- asp之家注:那么为什么要使用分页呢?当记录不多的时候,如10个或20个,我们可以也没必要使用分页来显示数据,但是数据是在不断增加的,当到了
- 首先将ORACLE 10g的安装光盘放入光驱,如果自动运行,一般会出现如图1安装界面: 图1 单击“开始安装”,就可以安装ORACLE 10
- Asp开发 联通CDMA以下是在开发wap中的随笔,其中一些对于“老鸟”来说,谈不上什么,希望对初学者有所帮助,大家有什么小技巧,欢迎顶上来
- 本程序属于一种特别的方法。使用范围比较有限,而且有一定的危险性。借鉴了asp后门里的一些方法。由于读取某IP的网卡MAC地址本程序通过调用a
- 用FrontPage做网页的朋友们,你的主要页面中,可能都带有许多相同的元素吧?如页头横向排列(或左侧纵向排列)的主要链接按钮、页底的板权说
- 为什么我写ASP分页教程要提到AJAX呢,因为我们要多练习一下编程过程中,结构化的重要性. 再加上很多朋友对分页感到很高深,所以一直都不敢去
- 有两种方法供参考.一种是实实在在的将图片先用ASPJPEG组件做成想要的尺寸,再读取好处是节省服务器带宽,速度快坏处是处理起来较为麻烦,并网
- 动态联接库(DLL)是加快应用程序关键部分的执行速度的重要方法,但有一点恐怕大部分人都不知道,那就是在ASP文件也能通过调用DLL来加快服务
- 正确使用字体和颜色可以让网页内容更易阅读,下面我们来看看具体的优化措施。留意颜色的对比对于视力不太好的人或者对于不太好的显示设备来说,黑地白
- 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac
- 今天我们整理了ip地址和身份证的javascript验证方法。虽然ip地址和身份证的验证不是很经常会遇到,但是大家也可以研究一下js代码,里
- 本文从多个角度来讲解如何在Access数据库上如何上传并且显示上所上传图片。在 * 站制做过程中,需要上传图片、显示图片,上传的图片要能够保