删除 <a> link 中仅包含图像的文本底线

Question

我有一个图标列表，其中每个图标都是 link 到 phone、facebook link、twitter...

它在 table 中工作正常，但现在我想删除 table 以仅保留按钮并在每个按钮之间设置 3 个空白。

这是我现在的table：

<table width:100% border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td  id="table_column_phone" style="display:;text-align:center">
            <a id="phone_to_link" href='' rel='external'>
              <img id="image_phone" src="./images/phone_64.png" width="35px"/>
            </a>

          </td>
          <td id="table_column_mail" style="display:;text-align:center">
            <a id="mail_to_link" href="">
              <img id="image_mail" src="./images/mail_64.png" width="35px"/>
            </a>

          </td>
          <td id="table_column_web" style="display:;text-align:center">
            <a href="" id="web_to_link">
              <img id="image_web" src="./images/web_64.png" width="35px"/>
            </a>

          </td>
          <td  id="table_column_facebook" style="display:;text-align:center">
            <a id="facebook_to_link" href="">
              <img id="image_facebook" src="./images/facebook_64.png" width="35px"/>
            </a>

          </td>
          <td id="table_column_twitter" style="display:;text-align:center">
            <a href="" id="twitter_to_link">
              <img id="image_twitter" src="./images/twitter_64.png" width="35px"/>
            </a>
          </td>
        </tr>
      </table>

并且显示出来了，只有3个图标（没有数据我隐藏了一些）（这代表和image_> []）：

[]        []       []

如果我在 table 中退出 width:100% 或完全退出 table（td 和 tr 也一样）并且只放置带有一些空格的图标 ($nbsp;) 我有这样的东西：

[]_   []_   []

我不知道为什么我的图标后面有“_”。使用完全相同的代码。

有什么想法吗？您需要查看更多我的代码吗？我会post它。

例如：

 <a id="phone_to_link" href='' rel='external'>
              <img id="image_phone" src="./images/phone_64.png" width="35px"/>
            </a>

            <a id="mail_to_link" href="">
              <img id="image_mail" src="./images/mail_64.png" width="35px"/>
            </a>
            <a href="" id="web_to_link">
              <img id="image_web" src="./images/web_64.png" width="35px"/>
            </a>
            <a id="facebook_to_link" href="">
              <img id="image_facebook" src="./images/facebook_64.png" width="35px"/>
            </a>
            <a href="" id="twitter_to_link">
              <img id="image_twitter" src="./images/twitter_64.png" width="35px"/>
            </a>

显示：

[]_[]_[]_[]_[]

Answer 1

为链接添加 class 名称

<a href=... class="button">...</a>

并使用CSS

a.button {
text-decoration: none;
}

删除 <a> link 中仅包含图像的文本底线

Delete text bottom line in <a> link with just an image

html

jquery-mobile