CSS布局中以图换字几种方法的优劣分析 -- css学习-- 编程爱好者博客

CSS布局中的以图换字，52CSS.com也进行过介绍，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。
　　由于这种方式被大多数人所认同，所以方法也越来越多：

　　一、使用text-indent的负值，将内容移出容器；
　　二、使用display:none，将内容隐藏；
　　三、使用padding将文字挤出容器之外，并将超出的部分hidden;
　　四、使用font设置超小字体，达到隐藏内容的目的。

　　一、看起来蛮简单，但其实有几个不理想的地方，比较吃资源；在ie5下面会出现滞后背景无法显示；内容为超链接时，长长的黑色虚框。不过这种方式比较常用。52CSS.com也进行过介绍：
CSS经典技巧：text-indent隐藏文字（以图换字）
　　{以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
　　因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
　　于是用最常用的text-indent：

css:

Example Source Code [www.52css.com]

h4 a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}

Xhtml:

Example Source Code [www.52css.com]

<h4><a href="#">css网页布局w3c标准</a></h4>

　　但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
　　解决办法至少有两个：

Example Source Code [www.52css.com]

1：将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。

最终结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS实例：text-indent隐藏文字（以图换字） - 52CSS.com</title>
<style type="text/css">
h4 a{display:block; background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}
</style>

</head>

<body>
<h4><a href="http://www.w3cbbs.com/">css网页布局w3c标准</a></h4>
</body>
</html>
}

　　二、其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。
　　三、Standard Model下要2层标签才能搞定。
　　四、只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的。

　　个人推荐用一、三比较合适，当然可能在浏览器中会出现一些意外情况，只要大家注意避免就可以了，如点击的虚线，以及低版本浏览器中出错等。

博客介绍

正文

CSS布局中以图换字几种方法的优劣分析2009-01-20 13:58:00

评论