Question

我需要在母版页文件上设置一个链接。所以我为表格列（<td>）设置了一个背景图像，并将一些字体分别作为“home”。现在我设置“onclick”事件并将其重定向到<td>的页面。但它为浏览器上的图像提供了一些空间。所以链接（手形符号）从下面的空白区域开始到按钮图像。我检查了所有边距设置，填充等。但它不会工作。所以现在我决定为背景图像设置一个href。有可能或任何其他方式来纠正这个问题？我在互联网上找到了一些帮助。但我不知道如何使用此代码。我在这篇文章中附上了帮助代码。

我的代码：

<tr style="height:44px;">
            <td id="Homebutton" runat="server" style="height: 44px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>
</tr>

css文件

.menubuttonhomefocus
        {
            background-image: url('Images/homebuttonfocus.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: White;
            padding-top: 11px;
            font-family: Arial;
            font-size: 10pt;
            font-weight: 500;
        }

来自互联网的帮助代码

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; }

Answer 1

正如Jukka已经提到的那样，无法设置通过CSS应用的背景图像的链接。

您应该使用<a>标记。诀窍是强制链接的高度到图像的高度。

示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Image link</title>
    <style type="text/css">
      td {
        padding: 0;
      }
      a {
        display: block;
        height: 89px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="background-color: blue;"><a href="#asdf"><img src="http://getfirebug.com/img/firebug-logo.png" style="background-color: yellow;"/></a></td>
      </tr>
    </table>
  </body>
</html>

虽然我还想注意你应该从不使用表格进行布局。有several good reasons不使用表格布局。相反，你可以使用例如<div> s，<header>和<section> s。

Answer 2

<强> HTML

<tr>
  <td id="Homebutton" runat="server" class="menubutton">
    <a href="home.html">Home</a>
  </td>
</tr>

<强> CSS

td {
  padding: 0;
}

.menubutton > a {
  display: block;
  width: 101px;
  height: 44px;
  background-repeat: no-repeat;
  vertical-align: top;
  padding-top: 11px;
  color: white;
  text-align: center;
  font-family: Arial;
  font-size: 10pt;
  font-weight: 500;
  cursor: pointer;
}

#Homebutton {
  background-image: url(Images/homebutton.png);
}

#Homebutton:hover {
  background-image: url(Images/homebuttonfocus.png);
}

请注意，对于悬停效果，您只需使用:hover伪类。

顺便说一下。图像底部的空间是为文本保留的。即如果你写了一些文字，它会出现在图像下方。

如何链接表格单元格？

2 个答案: