Question

几年前（读作10年）我会使用一个HTML片段，它会采用SPAN / Anchor标签并使用CSS将其挂钩到一个按钮形状的图形。但出于某种原因，我必须遗漏一些东西，因为它不再起作用。

示例html：

<div id="process1" class="loc_1">
<table>
    <tr>
       <td class="columnOne">
            <span class="processTitle"><a href="Example.html">Example</a></span> 
            <span class="updateIndicator">12/28/2014</span> 
       </td>

        <td>
            <div class="loc_1">
                <span class="templateName"><img src="flag.gif" alt="Location 1" />Example Link</span>
                <span class="templateLinks"><a target="_blank" href="Example.doc" class="linkTemplate"></a></span>
            </div>
        </td>

     </tr>
 </table>
</div>

相关CSS：

div span.templateName{
  float: left;
  width: 270px;
  height:auto;
  text-align: left;
  margin-top:7px;
  overflow:visible;
}
div span.templateLinks {
  float: left;
  margin-left: 10px;
  text-align: left;
  margin-top:7px;
}

div span.templateLinks a.linkTemplate{
  float: left;
  width:45px;
  background:transparent url("button.gif") 0px 0px no-repeat;
}

div span.templateLinks a.linkTemplate:hover{
    background:transparent url("button_over.gif") 0px 0px no-repeat;
}

具体来说，“span class =”templateLinks“...”部分不会渲染图形按钮。其他所有内容都正常呈现，不会产生任何错误或警告。

想法或评论？

Answer 1

将按钮的高度添加到div span.templateLinks a.linkTemplate

Answer 2

唉！谢谢Nickfmc！

关键是身高：

div span.templateLinks a.linkTemplate{
  float: left;
  height:28px;
  width:45px;
  background:transparent url("button.gif") 0px 0px no-repeat;
}

我发誓我在CSS中尝试了多种方式的高度参数而没有成功，但只是在SPAN标签中添加它就可以了。在以前工作的时候，这么简单但又很痛苦。

非常感谢这个论坛！

使用CSS和Span / A标记挂钩到Graphic图像以充当Button

2 个答案: