У меня есть правило CSS, как это:

a:hover { background-color: #fff; }

Но это приводит к плохо выглядящему промежутку внизу на ссылках изображения, и что еще хуже, если у меня есть прозрачные изображения, цвет фона ссылки может быть виден через изображение.

Я сталкивался с этой проблемой много раз прежде, но я всегда решал ее, используя быстрый и грязный подход к назначению класса для ссылок на изображения:

a.imagelink:hover { background-color: transparent; }

Сегодня я искал более элегантное решение этой проблемы, когда наткнулся наэтот.

В основном то, что он предлагает, используетdisplay: blockи это действительно решает проблему непрозрачных изображений. Тем не менее, это приводит к другой проблеме: теперь ссылка такая же широкая, как и абзац, а изображение - нет.

Есть хороший способ решить эту проблему, или я должен снова использовать грязный подход?

Спасибо,