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高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的。 个人推荐用一、三比较合适，当然可能在浏览器中会出现一些意外情况，只要大家注意避免就可以了，如点击的虚线，以及低版本浏览器中出错等。 相关推荐 http://www.114study.com/?ybtg=wuhuaitang
评论