css - css アイコンの高さの問題

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動作しません。誰でも役立つことを知っていますか？