I've been doing some reading recently about text-indent:-999em potentially being mistaken by search engine bots as a spammy technique.
One of our front end designers regularly uses this technique for adding links to areas use background image sprites.
Take the following html/css:
//html
<div id="masthead">
<a href="/path/to/page">View this in more detail</a>
</div>
//css
#masthead {
开发者_开发百科background:transparent url(/path/to/image.png) top left no-repeat;
position:relative;
}
#masthead a {
display:block;
width:100%
height:100%;
text-indent:-999em;
}
This then having the effect of the background image being clickable.
Is there a nicer alternative to this?
I can sort of achieve the same thing without the text-indent trick using a transparent gif and alt text, however kinda feels old skool.
<a href="/path/to/page"><img src="transparent.gif" alt="View this in more detail" /></a>
Just interested to hear what the general consensus is on this.
You can use this as a text indent alternative and with less markup:
CSS
a{
background: url("http://www.google.co.in/intl/en_com/images/srpr/logo1w.png") no-repeat;
display:block;
width:100px;
height:100px;
font-size:0;
}
Check this example: http://jsfiddle.net/sandeep/epq2F/
精彩评论