1

我想在我的 HTML 页面中使用一种标准的方法来格式化“显示更多”链接。

在 HTML 中，我使用：

<span class="showMore">Show more details</span>

然后在css中，我有：

.showMore {
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat 0px 0px;
}

.showMore:hover {
    color: #F5891D;
    cursor: pointer;
}

其中add.png是一个 16x16 的 famfamfam 丝绸图标。我使用 JavaScript 使用onclick事件来扩展一些内容部分。

这在 Firefox 3.0.5 中运行良好，但在 IE 7 中，图标的最后几个像素被切掉了。我正在寻找一种解决方法。使用 height 不适用于像<span/>. 添加透明边框修复了 IE7 中的问题：

.showMore {
    border: 1px solid transparent;
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat 0px 0px;
}

但是 IE6 不处理透明度。使文本更大可以解决问题，但我不想要大文本。line-height不起作用。任何人都知道有什么可以帮助的吗？

4

2 回答 2

3

我已经解决了这个问题。我不知道为什么，但使用no-repeat center left而不是no-repeat top left确保 IE 不会切断图标的底部 2px。为什么使用center而不是top应该导致图像更高是奇怪的，但那是你的 IE？

.showMore {
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat center left;
}

.showMore:hover {
    color: #F5891D;
    cursor: pointer;
}
于 2009-01-23T10:57:25.967 回答
0

做

display: block;
height: 16px;

帮助修复跨度的高度？

于 2009-01-23T10:54:21.013 回答