1


0

CSSアイコンの高さの問題

私のHTMLページに "もっと表示"リンクをフォーマットする標準的な方法が欲しいのです。

HTMLでは私が使用します:

Show more details

その後、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は、16 x 16 famfamfamのシルクアイコンです。 私はJavaScriptを使って `onclick`イベントを使ってコンテンツセクションを拡張しています。

これはFirefox 3.0.5ではうまく機能しますが、IE 7ではアイコンの最後の数ピクセルが切り取られます。 回避策を探しています。 heightの使用は ``のようなインライン要素では機能しません。 透明な枠線を追加すると、IE7の問題が修正されます。

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

しかし、IE6は透明性を扱いません。 テキストを大きくすると問題は解決しますが、大きいテキストは必要ありません。 `line-height`は動きません。 誰かが助けるかもしれない何かを知っていますか?

2 Answer


3


私は問題を解決しました。 私はなぜなのかわかりませんが、「左上のno-repeat」の代わりに「no-repeat center left」を使用することで、IEがアイコンの下2pxを切り落とさないようにします。 なぜ top`の代わりに center`を使うとイメージが高くなるのがおかしいのでしょうか。

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

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


0


する

表示ブロック;高さ:16ピクセル。

スパンの高さを修正するのに役立ちますか?