Question

我想将facebook-footer-rect.png显示为链接，并在屏幕阅读器的链接标记中提供措辞。

<a href="http://facebook.com/ourpage" title="Join us on Facebook" rel="external" class="facebook-footer">Join us on Facebook</a>

链接示例html：

<div class="footer-links">
 <p>
  <a href="link">Link 1</a>
  <a href="link">Link 2</a>
  <a href="link">Link 3</a>
  <a href="link">Link 3</a>
  <a href="http://facebook.com/ourpage" title="Join us on Facebook" rel="external" class="facebook-footer">Join us on Facebook</a>
 </p>
</div>

页脚链接和facebook-footer的CSS

.footer-links { line-height:1.9em; text-align:center; margin: 0; }

.footer-links a:visited, .footer-links a:link { display:block; padding:7px; background-color:#216e4f; text-decoration:none; display:inline; }

.footer-links p {
 margin:0 0 10px 0;
}

.footer-links a:hover { background-color:#337a5d; text-decoration:none; display:inline; }

.footer-links a.facebook-footer:link,
.footer-links a.facebook-footer:visited { 
 background: url('/images/uploads/images/facebook-footer-rect.png') no-repeat left top;
 height:28px;
 width:81px;
 display: inline;
 text-decoration: none;
 overflow: auto;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

它的外观截图：

w / facebook-footer display：block; http://cl.ly/4TBY

w / facebook-footer显示：内联; http://cl.ly/4Twi

这就是我想要的样子：http://cl.ly/4TVX（照片显示这个）

更新：我添加了display：inline-block;和vertical-align：top;根据某人的建议，它现在看起来像这样：http://cl.ly/4Tu8

CSS现在用于.facebook-footer

.footer-links a.facebook-footer:link,
.footer-links a.facebook-footer:visited { 
 background: url('/images/uploads/images/facebook-footer-rect.png') no-repeat;
 height:28px;
 width:81px;
 display: inline-block;
 text-decoration: none;
 vertical-align: top;
 overflow: auto;
 text-indent: -10000px;
 font-size: 0;
 line-height: 0;
}

代码http://jsfiddle.net/sHSYM/

的

演示

Answer 1

尝试display: inline-block;并可能需要vertical-align属性。

修改的检查您所做的实例，您可以添加position:relative＆amp; bottom:2px;所以facebook图像的顶部和链接将处于相同的水平位置。另一个选项position:relative;可以是margin-top:-2px;。

Answer 2

是的！得到它...这有些令人费解，但是这个带内联块的应该可以工作。

请记住，all major browsers不支持内联块（IE7不完整）。

.footer-links a.facebook-footer:link, .footer-links a.facebook-footer:visited {
    /* Set to repeat, so the blue can come at the bottom as well, but is not needed.*/
    background: url("http://i56.tinypic.com/339hu0l.png") repeat scroll 0 0 transparent;
    display: inline-block;
    font-size: 1.9em;
    height: 1em;
    padding: 0; /* No padding, only tested this one in FF and IE8 */
    vertical-align: top; /* bottom seems to work as well*/
    width: 81px;
}

.footer-links p {
    margin:0 0 10px 0;
    overflow:hidden; /* important change, makes them all of the same size */
}

在此处查看您的jsFiddle：http://jsfiddle.net/sHSYM/1/

需要正确显示与文本链接内联的链接背景图像

2 个答案: