Firefox отрисовывает тонкие серые линии по краям поля содержимого png на определенной ширине - почему? - PullRequest
Новая
       37

Firefox отрисовывает тонкие серые линии по краям поля содержимого png на определенной ширине - почему?

3 голосов
/ 11 февраля 2009

Когда firefox (3.0.6) отображает изображение в формате png с определенной шириной (например, 50%), тонкая серая линия отображается вдоль левого и верхнего краев поля содержимого. Линия исчезает при других значениях ширины (например, 70%). Кроме того, кажется, что линия не присутствует в исходном изображении (используя gimp для проверки изображения).

Это явление возникает при отсутствии разметки стиля CSS - в приведенном ниже примере HTML присутствует CSS, чтобы прояснить, где расположены серые линии - кажется очевидным, что серые линии появляются на самом краю само поле содержимого.

Мне трудно представить, что это добросовестная ошибка Firefox, и мне интересно, какую концепцию я пропускаю или не понимаю ...

Спасибо за ваше время и любые предложения / мысли ...

Изображения можно увидеть здесь http://datlisp.blogspot.com/2009/02/img-width-tag-and-firefox-rendering-of.html

HTML: 

<html>
<head><title>problems with pngs</title></head>
<body>
<div style="border-color: red; border-width: thin; border-style: solid;
      padding: 2px">
<img src="http://imagebin.ca/img/ato4dM.png"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
    padding: 2px;"/>    
</div>
</body></html>

Ответы [ 4 ]

1 голос
/ 21 мая 2009

У меня была похожая проблема с галереей изображений, над которой я работал (извините, я не могу связать, поскольку я новичок). Миниатюры изображений отображаются в реальном размере без изменения размера HTML / CSS.

Иногда они получают ширину в 1 пиксель справа и снизу между изображением div и фоном тени. Нам потребовалось некоторое время, чтобы понять, почему это случается иногда, но мы сузили его до настроек масштабирования Firefox.

Если вы масштабируете страницу в Firefox (ctrl и колесико мыши, или ctrl и +/-), то точно так же, как в вашем случае, они появляются при определенных уровнях масштабирования. Сброс на 100% зум (ctrl и 0) исправил это каждый раз для нас, но не помогает людям, которые используют функцию зума.

1 голос
/ 13 февраля 2009

Сохраните ваши изображения как PNG-24. У меня были похожие проблемы с искажением пикселей при попытке динамического изменения размера изображений PNG-8 в браузере.

Кроме того, я не уверен, будет ли это работать в вашей конкретной ситуации, но, если возможно, вы должны изменить размер изображений, прежде чем они будут отображены в браузере. Использование размера браузера приводит к искажению и может увеличить использование полосы пропускания, если вы пытаетесь отображать очень большие изображения в меньшем формате.

Дополнительная информация: http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm

0 голосов
/ 05 марта 2014

У меня была похожая проблема при отображении .png-изображения в теге div. Тонкая черная линия была нанесена на сторону изображения. Чтобы это исправить, мне пришлось добавить следующий стиль CSS: box-shadow: none;

0 голосов
/ 13 февраля 2009

Используя вашу демонстрационную страницу и изображение, я не смог увидеть ничего плохого.

Может это проблема с видеодрайверами? Я считаю, что Firefox (и Каир, графическая библиотека, которую он использует) использует аппаратное ускорение для плавного изменения размера изображений, и, к сожалению, вы не можете отключить его AFAIK.

Попробуйте войти через удаленный протокол, чтобы обойти видеокарту и проверить ее. По крайней мере, вы можете получить некоторое спокойствие. :)

...