-3

我需要在母版页文件上设置一个链接。所以我为表格列（<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; }
4

2 回答 2

0

正如 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>

尽管我还想指出，您永远不应该使用表格进行布局。不使用表格布局有几个很好的理由。相反，您可以使用例如<div>s、<header>s 和<section>s。

于 2012-05-02T09:51:19.163 回答
0

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伪类。

顺便提一句。图像底部的空间是为文本保留的。即，如果您写了一些文本，它将出现在图像下方。

于 2012-05-02T10:28:04.187 回答