Если вы берете следующее изображение:
http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg
поместите его в html-файл с тегом IMG, затем измените его размер до ширины 160, но не устанавливайте высоту, и в Firefox вы увидите уродливую черную линию под изображением.
Например:
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" width="160" />
или
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" style="width:160px;" />
(Обратите внимание, что я использую FF 3.6.3 в Ubuntu Linux 8.04 LTS, если это имеет значение.)
Примечание. Я не хочу устанавливать высоту, потому что тогда изображение будет выглядеть забавно, когда все, что я хочу сделать, это изменить ширину, чтобы она хорошо вписывалась в колонку продуктов Amazon. Кроме того, я не всегда могу точно предсказать высоту изображения, и некоторые API для проверки изображения могут слишком сильно замедлять работу сайта.
Итак, как вы думаете, почему появляется черная линия, и что я могу сделать программно в HTML или CSS, чтобы предотвратить это? Обратите внимание, что я уже пытался установить стиль фона цвета для изображения #FFF, и я все еще получаю эту проблему.