Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them. Please note that this page is no longer being maintained.
Requirements: the replacement must solve the screen reader problem, and it must address the “images off, css on” problem. It is also hoped that a solution will be found that reduces the need for empty elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.
大量新的和有趣的修订原Fahrner图像替换技术于2003年底如雨后春笋般出现。是时候合并这一项技术的时候了。请注意，此页不再被维护。
要求：更换必须解决的屏幕阅读器的问题，它必须解决的“images off, css on”的问题。同时也希望会发现一个解决方案，降低了空元素的需要。成功的技术必须是兼容到IE 5.x，但作为写这些都不时出现失败，让浏览器支持矩阵将难以幸免。
Classic FIR
[img][attach]432[/attach][/img]
Using Doug Bowman’s original tutorial, we surround the text with empty spans to hide it with display: none; Issues: most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under “images off, css on” scenarios, semantically meaningless s necessary.
使用格鲍曼的原教程，我们用空的环绕文本，然后设置的display属性为：none; 问题：大多数屏幕阅读器将不接起来的文本时，它是不会在屏幕上呈现，没能满足“images off, css on”的情况，需要语义上毫无意义。
Revised Image Replacement
/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {display: none; }
Single-pixel Replacement
Radu Darvas proposed adding a one-pixel, transparent GIF image to the header to restore alt text. Issues: an extra meaningless element is added to the page.
Radu Darvas 建议增加一个像素，透明GIF图像恢复ALT文本的头。问题：一个额外的毫无意义的元素添加到页面 。
Revised Image Replacement
/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {display: none; }
Radu Method
Radu has also conceived a method involving margin positioning to hide the text. Similar in theory to the Phark Method below, Radu’s method works in IE5. Issues: doesn’t solve css on/images off problem.
Radu还设想了一个方法，需要一个margin positionin 来隐藏文本 。Radu的方法在理论上同下面的Phark方法类似，IE5中的问题：没有解决“images off, css on”问题。
Revised Image Replacement
/* css */
#header {
background: url(sample-opaque.gif) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}
Leahy/Langridge Method
Seamus Leahy and Stuart Langridge independently discovered a method which allows dropping of the span and, theoretically (although this isn’t confirmed) restores accessibility thanks to overflow: hidden; — Issues: nothing shows up under “images off, css on” scenarios, box model hack required to work in IE5.
西莫莱希和Stuart Langridge独立发现了一种方法，允许的下降跨度，理论上（尽管这是未证实）恢复无障碍感谢“overflow：hidden ; ”属性。问题：没有在“images off, css on”下显示 ，在IE5中下需要用盒模型Hack来使之工作。
Revised Image Replacement
/* css */
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
Phark Method
Greatly simplifying Leahy/Langridge, Mike Rundle of Phark offered a solution that uses text-indent to hide the text. This is confirmed to work in JAWS, solving the accessibility problem. Issues: nothing shows up under “images off, css on” scenarios, doesn’t work in IE5.
大大简化了Leahy/Langridge，Mike Rundle of Phark提供一个解决方案，使用文本缩进隐藏文字。这一点在IAWS下被证实正常工作，解决了无障碍问题。问题：在“images off, css on”下什么也不显示，同时在IE5下也不能正常工作。
Revised Image Replacement
/* css */
#header {
text-indent: -100em;
overflow: hidden;
background: url(sample-opaque.gif);
height: 25px;
}
Phark Revisited
Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5. Issues: doesn’t solve images off/css on.
进一步探测发现前一个薄弱环节，解决在Safari下围绕着滚动条和IE5中破损的问题：不解决图像关闭/ CSS 。
Revised Image Replacement
/* css */
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
Dwyer Method
From Leon Dwyer comes a twist on Classic FIR. Works in seemingly everything known at the present time, including screenreaders. Issues: doesn’t solve images off/css on, still requires extra span.
从Leon Dwyer而来的对” Classic FIR”的变形 。目前，它看似都工作很好，包括屏幕阅读器。问题：在images off/css on上不能解决，仍然需要额外的。
Revised Image Replacement
/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
Gilder/Levin Method
Tom Gilder and Levin Alexander proposed a further variation that theoretically fixes the accessibility problems (verification needed, but it’s almost assured this works in JAWS et. al), and allows the text to show up even if images are turned off. Issues: extra empty span, transparent images don’t hide text.
(note: header duplicated to illustrate transparency problem)
Tom Gilder和Levin Alexander提出一个进一步的变化，从理论上修复了无障碍问题（需要验证，但在JAVS等下，它几乎保证了工作。），允许文本显示，即便是图像是被关闭的。问题：额外的，透明图像不隐藏文本。
（注：头重复说明透明度的问题）
Revised Image Replacement
/* css */
#header {width: 329px; height: 25px; position: relative; }
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
Lindsay Method
Russ Weakley writes that by setting your fonts to a tiny, 1px size and matching fore- and background-colours, you don’t even need to hide the text. Issues: doesn’t solve images off/CSS on, doesn’t work on anything but flat-colour backgrounds.
Russ Weakley写道，设置你的字体为一个微小的，1px的大小，同时前景和背景色匹配，你甚至都不需要隐藏文字。问题：在images off/CSS on下不能解决，不能在工作在任何平面彩色背景下。
Revised Image Replacement
/* css */
#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}
Shea Enhancement
And finally, no matter which method you use, you end up losing alt text tooltips on hover that you and your users might be used to seeing on images. Technically, you shouldn’t rely on this anyway, since title is far more appropriate for tool-tips. So by adding a title back to your header, you can restore these little hover effects to your site. (This technique uses the Leahy/Langridge technique as a base, and only adds the title attribute)
最后，无论您使用哪种方法，你最终失去ALT悬停文本工具提示，您和您的用户可能会使用图像上看到 。从技术上讲，你不应该依靠这种方法，因为标题是适当的工具提示。因此，通过添加一个标题回你的头，你可以恢复到您的网站这些小的悬停效果 。（这种技术使用莱希/ Langridge技术作为基础，并只添加标题属性）
Revised Image Replacement
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
原文引自：[url=http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin]http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin[/url]
PDF文件下载：[file][attach]433[/attach][/file]