logo 的处理方法

发表于   |   分类于   |  

如果 logo 单纯用图片的话，不能用于搜索，屏幕阅读器和其他一些辅助设备，将会丢失重要信息，最好的办法是将 logo 设成背景，文字则缩进到屏幕外，不显示。
第一种方法：

h1#logo {
width: 450px;
height: 80px
background: url(jenware.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

h1 是块级元素，可以将其设置为 logo 的长宽，文字则向右缩进盒子宽度的100%，溢出盒子，为了防止换行，加一个 white-space: nowrap; 。然后将溢出的部分隐藏。

第二种方法：

h1#logo {
width: 450px;
height: 100px
background: url(jenware.png) no-repeat;
text-indent: -9999px;
}

第二种方法是将文字向左缩进一个很大的距离，这种方法不用担心折叠，也不用隐藏溢出，code 简单，但是缺点是浏览器会计算和画出这个超长的元素框。