css图标高度问题

发布于 2024-07-12 12:12:32 字数 1057 浏览 8 评论 0原文

我希望有一种标准方法来格式化 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 中图标的最后几个像素被截掉。我正在寻找解决方法。使用高度不适用于等内联元素。添加透明边框修复了 IE7 中的问题：

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

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

原文

I want to have a standard method of formatting "Show More" links in my HTML pages.

In HTML I use:

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

Then in the css, I have:

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

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

where add.png is a 16x16 famfamfam silk icon. I use JavaScript to expand some content section using an onclick event.

This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like <span/>. Adding a transparent border fixes the issue in IE7:

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

But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. line-height doesn't work. Anyone know anything that may help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆蝶 2024-07-19 12:12:32

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

I've solved the problem. I've no idea why but using no-repeat center left instead of no-repeat top left ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??

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

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

回复收藏 0 原文