Question

我希望在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中，图标的最后几个像素被切掉了。我正在寻找一种解决方法。使用高度不适用于<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不起作用。任何人都知道任何有用的东西吗？

Answer 1

我已经解决了这个问题。我不知道为什么但是使用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;
}

Answer 2

display: block;
height: 16px;

帮助修复跨度的高度？

css图标高度问题

2 个答案: