如何使 <a href> 可以在没有文本的情况下单击答案

【问题标题】：How to make <a href> clickable without text如何使 <a href> 可以在没有文本的情况下单击
【发布时间】：2015-09-03 23:26:18
【问题描述】：

我有一个包含一堆链接的表格。链接不包含文本，而是使用 css 属性 content 来定义链接的外观（在这种情况下，链接包含 facebook、instagram 和 twitter 的符号）。到目前为止，它看起来应该，但我无法点击它们。我想避免使用&nbsp;，我该怎么办？

这是我的 HTML：

<table style="width: 100%">
    <tbody>
        <tr>
            <td class="fblink">
                    <a href="http://www.facebook.com/ladygaga" target="_blank"></a>
           </td>
            <td class="twlink">
                <a href="http://twitter.com/LadyGaga" target="_blank"></a>
           </td>
            <td class="iglink">
                <a href="http://instagram.com/ladygaga" target="_blank"></a>
            </td>
         </tr>  
    </tbody>
</table>

还有我的 CSS：

table{
   border-collapse: seperate;
   border-spacing: 10px 0;
}

.fblink{
   background: blue;
}
.fblink:before{ 
   content:'\f30c';
}


.twlink{
   background: lightblue;
 }
.twlink:before{ 
   content:'\f309';
 }

.iglink{
   background: red;

 }
.iglink:before{ 
   content:'\f32d';
 }

有人可以帮帮我吗？我为它创建了一个小提琴http://jsfiddle.net/Qf99d/

提前致谢

【问题讨论】：

目前链接不包含任何内容。您可以将它们设置为 display:block 并给它们一些宽度/高度。

标签： html css

【解决方案1】：

你在错误的地方添加了伪元素......它们应该在锚链接而不是表格单元格内

JSfiddle

CSS

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}
tr td a  {
    display: block;
    text-decoration: none;
    width:100%; /* make anchor full widths */
}
a:before {
    color:white;

}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c'; /* now inside anchor */
}


.twlink{
    background: lightblue;
}
.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

【讨论】：

值得注意的是，一些浏览器，尤其是移动浏览器，不喜欢链接中的伪元素，并且不能正确点击。

【解决方案2】：

您必须在链接标签中添加一些内容，例如，您可以在链接中添加图标标签，如下所示：

<td>
                    <a href="http://www.facebook.com/ladygaga" target="_blank"><i class="fblink"></i></a>
           </td>

【讨论】：

【解决方案3】：

不要忘记：将table 元素用于布局目的被认为是一种不好的做法。使用 CSS 进行布局。

如果您想让整个表格单元格可点击而不更改您的标记，您可以使用以下内容：

http://jsfiddle.net/Qf99d/8/

CSS：

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}

.fblink a, .twlink a, .iglink a  {
    display: inline-block;    
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c';    
}

.twlink{
    background: lightblue;
}

.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

【讨论】：

【解决方案4】：

这是一个值得一提的相关旁注：如果您正在考虑使用没有可描述文本作为其内容（如图像或图标）的<a> 标签，那么您必须牢记可访问性。我建议包含title 属性或aria-label 属性。更多信息：https://dequeuniversity.com/rules/axe/1.1/link-name

【讨论】：

【解决方案5】：

如果你不想使用任何<img>，你可以在<a>标签中插入一个虚拟的DIV：

<a href="http://www.facebook.com/ladygaga" target="_blank"><div style="width:1em; height:1em; display:inline-block"></div></a>

【讨论】：

【解决方案6】：

只需在<a> 括号之间插入您希望能够点击的图像。

【讨论】：

【解决方案7】：

使用 CSS 将锚标签的宽度设置为其父标签的大小，即 display:block;整个表格单元格可点击比。

【讨论】：

【解决方案8】：

将锚点的宽度和高度设置为与背景图像相同的宽度和高度。除非被覆盖，否则根据其内容（没有内容）确定锚点的大小。

我检查了你的小提琴。确保 Anchor 的大小，而不仅仅是包含的 TD。

【讨论】：

【解决方案9】：

我知道有两种方法可以做到这一点。就像上面列出的那样，您可以在 a 标签内设置图像，也可以做一个图像映射。就个人而言，我会像这样放置链接。

<a href="http://www.facebook.com/ladygaga" target="_blank"><img src="File Here" /></a>

等等。希望这会有所帮助。

【讨论】：

【解决方案10】：

如果您没有可点击的内容，则不能指望 href 重定向您。

您可以在页面加载后使用 jQuery，如下所示：

<script>
$(function() {
  $("#theHref").html("\f30c");
});
</script>

【讨论】：

【解决方案11】：

在这样的链接标签之间使用多个（空格字符）

<a href="http://www.facebook.com/ladygaga" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>

【讨论】：

阅读帖子。 “我想避免使用 ”
糟糕！对不起。使用宽度为 1 像素、高度为任意的图像和透明的 png 图像。并在图片标签中设置宽度。