Имеется следующий html:
<a href="#">
<img src="image_source"/>
Текст ссылки
</a>
если для ссылки установлено свойство text-decoration: underline; то подчеркивается и текст и рисунок. Если рисунок полупрозрачный то сквозь него видна горизонтальная линия:
Замечено, что такое явление наблюдается только в Firefox.
Как избежать такого эффекта?
Проблема возникает при любом валидном DOCTYPE для XHTML. Если использовать DOCTYPE для HTML, например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «http://www.w3.org/TR/html4/strict.dtd»>
вместо
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
то все отображается корректно.
Можно использовать различные способы/хаки:
Использовать для картинки css:
a img {display: block; float: left;}
Ещё несколько способов указаны здесь
Материалы сайта распространяются под лицензией Creative Commons Attribution-Share Alike 3.0 Unported.
