Firefoxs는 특정 너비에서 PNG의 내용 상자 가장자리에서 얇은 회색 선을 렌더링합니다. 왜?

StackOverflow https://stackoverflow.com/questions/538082

문제

Firefox (3.0.6)가 특정 너비 (예 : 50%)에서 PNG 이미지를 렌더링하면 콘텐츠 상자의 왼쪽 및 상단 가장자리를 따라 얇은 회색 선이 표시됩니다. 선은 다른 너비 (예 : 70%)에서 사라집니다. 또한, 라인은 원본 이미지에 존재하지 않는 것 같습니다 (김프를 사용하여 이미지를 검사).

이 현상은 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>
도움이 되었습니까?

해결책

데모 페이지와 이미지를 사용하여 잘못된 것을 볼 수 없었습니다.

비디오 드라이버의 문제일까요? 나는 Firefox (및 Cairo, 그것이 사용하는 그래픽 라이브러리)가 하드웨어 가속을 활용하여 이미지를 부드럽게 크기로 조정하고 불행히도 Afaik을 비활성화 할 수 없다고 생각합니다.

원격 프로토콜을 통해 로그인하여 비디오 카드를 돌아 다니면서 확인하십시오. 적어도 당신은 마음의 평화를 얻을 수 있습니다. :)

다른 팁

이미지를 PNG-24로 저장하십시오. 브라우저에서 PNG-8 이미지를 동적으로 크기를 조정하려고 할 때 픽셀 왜곡과 비슷한 문제가있었습니다.

또한 이것이 특정 상황에서 작동하는지 확실하지 않지만 가능하면 이미지가 브라우저에 표시되기 전에 크기를 조정해야합니다. 브라우저 크기 조정에 의존하면 왜곡이 더 작은 형식으로 매우 큰 이미지를 표시하려는 경우 대역폭 사용량을 증가시킬 수 있습니다.

추가 정보: http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm

나는 내가 작업 한 이미지 갤러리와 비슷한 문제를 겪었습니다 (죄송합니다. 새로 링크 할 수 없습니다). 썸네일 이미지는 HTML/CSS 크기 조정이 진행되지 않은 실제 크기로 표시됩니다.

때때로 그들은 이미지 div와 드롭 그림자 배경 사이의 오른쪽과 하단에 1 픽셀 와이드 라인을 얻습니다. 왜 그것이 때때로 일어난 이유를 해결하는 데 시간이 걸렸지 만 우리는 그것을 Firefox Zoom 설정으로 좁혔습니다.

Firefox (Ctrl 및 Mousewheel 또는 Ctrl 및 +/-)에서 페이지를 확대하면 특정 줌 레벨에 나타납니다. 100% 줌 (CTRL 및 0)으로 재설정하면 매번 우리를 위해이를 수정했지만 줌 기능을 사용하는 사람들을 도울 수는 없습니다.

div-tag에 .png-image를 표시 할 때 비슷한 문제가있었습니다. 이미지 측면에서 얇고 검은 색 선이 렌더링되었습니다. 그것을 고치려면 다음 CSS 스타일을 추가해야했습니다. box-shadow: none;

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top