다른 PC의 동일한 브라우저가 동일한 HTML을 다르게 렌더링하게하는 원인은 무엇입니까?
https://stackoverflow.com/questions/1224796
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
난 그만 둔다. 클라이언트와 저는 XP 머신에서 Firefox 3.0.12를 실행하고 있습니다. 다른 시스템의 동일한 브라우저에서 동일한 페이지를보고 결과가 다릅니다. 참고 : 모든 IE 브라우저는 두 기계 모두에서 일관성이 있으며 FF 3.5.1은 FF 3.0.12와 일치합니다. (그는 비교하기 위해 FF 3.5.x가 설치되어 있지 않습니다).
그의 헤더 div를 일으키는 1 픽셀 차이가 있습니다. (모든 이미지, 텍스트 없음) 포장. 내 것이 괜찮습니다. 그의 헤더를 1 px (Firebug CSS 편집을 통해)로 확장하면 작동합니다.
그래서 내 질문은 렌더링에 영향을 미치는 다른 변수가 무엇인지입니다.
나는 "상자 밖에"생각하려고 노력하고 있습니다. 왜냐하면 그것이 정확히 동일하게 작동하는 것처럼 보이기 때문입니다.
브라우저 캐시를 지 웠습니다. HTML 소스에서 Diff를 수행했으며 JavaScript DateTime 스탬프와 JavaScript 추적 코드 Var를 제외하고는 소스가 동일합니다.
이 질문은 소스에 도움이 될 것이라는 것을 알고 있지만 내 고객은이 페이지가 인터넷에서 아직 실시간 라이브를 원하지 않습니다. 또한 WebEx 세션을 통해 문제를 확인했습니다. 처음에는 우리가 다른 결과를 얻을 것이라고 믿을 수 없었습니다.
다른 사람이 전에 이와 같은 것을 발견합니까? 다음에 무엇을 확인 / 디버그해야합니까?
편집하다: 글꼴을 가리키는 많은 제안이 있지만 헤더는 이미지 만 사용합니다. 글쎄, 그것은 완전히 사실이 아닙니다. 접을 수있는 메뉴의 일부인 div가 있지만 그 모든 것은 다음으로 설정되어 있습니다. display:none 처음에는 렌더링을 위해, 나는 그것이 다른 것이라고 생각합니다.
편집 2 : 내 컴퓨터에서 모든 종류의 글꼴과 크기 (시스템 기본 글꼴 설정과 Firefox 내)를 변경하여 문제를 복제하려고 시도했습니다. 렌더링 스타일 (표준 대 클리어 유형)을 변경했습니다. 나다. 문제는 거의 분명히 글꼴과 관련이 없습니다. 문제를 복제하기 위해 클라이언트의 컴퓨터에 더 액세스 할 수 있는지 확인해야합니다.
해결책
우리는 우리 자신의 브라우저에서 사이트를 볼 수 없기 때문에 다음은 문제를 해결하는 데 사용하는 프로세스가 있습니다.
코드 블록 제거를 시작하십시오 두 브라우저가 동일하게 보일 때까지 조각별로 조각.
마지막으로 제거한 코드 블록이 모든 것을 완벽하게 정렬하게 만들었습니다 (신체에서 덩어리가 없어도). 범인이있는 곳 근처에 있습니다.
범인을 찾았으므로 모든 코드를 다시 배치하십시오. 먼저 글꼴로 엉망으로 시작하십시오. 글꼴, 크기, 텍스트 제거 등을 변경하십시오. 브라우저가 동일한 상태를 찾을 수있을 때까지. 글꼴 문제가 아닌 경우, 일치하는 조건을 찾을 때까지 다른 부분으로 엉망이됩니다.
일단 그렇게하면 문제를 알게되고 문제를 해결할 수 있습니다.
다른 팁
Firefox를 사용하는 경우 CTRL-0을 누르면 줌 레벨을 기본적으로 사용하십시오.
나는 내 FF3.0이 최소 글꼴 크기 16을 사용하기 위해 선호도를 설정했기 때문에 FF3.0이 다른 사람들과 다르게 보이게한다는 것을 알고 있습니다. 나는 작은 글씨를 얻지 못하고, 읽을 수있는 글쓰기를 얻습니다.
또한 Mac에 있으면 기본 글꼴은 Sans Serif이며 Windows에서는 모든 것이 세리프이며 글꼴 너비와 높이를 더욱 변경할 수 있습니다.
페이지의 어떤 것이 "em"또는 "ex"단위로 지정되면 글꼴 크기에 따라 다릅니다.
플러그인/애드온을 비교합니다.
글꼴 스무딩 설정은 어떻습니까? 동일합니까 (없음/antialias/cleartype)? 그것은 주어진 텍스트의 너비를 바꿀 수 있으며, 당신이 찾고있는 것일 수 있습니다.
둘 다 동일한 화면 크기를 사용하고 있습니까? Firefox는 글꼴을 페이지를 보는 사람의 명백한 크기 또는 특정 수의 픽셀로 확장하려고합니까?
떠오르는 한 가지는 글꼴을 설치하는 것입니다. 클라이언트가없는 글꼴이있는 경우 계산 된 크기에서 1 픽셀 차이가있을 수 있습니다. FF와 IE는 다르게 반올림 될 수 있으므로 왜 다르게 행동하는지 설명 할 것입니다.
나는 주로 모든 "폰트 녀석"에 동의하지만, 일부 헤더는 프록시와 서버와 클라이언트 사이에 추가 될 수 있으므로 HTTP 헤더를 확인하는 데 도움이되지 않는다면 HTTP 헤더를 확인하는 데 도움이되지 않습니다. 그러나 글꼴 제안을 먼저 시도하십시오 ...
행운을 빕니다 ;)
운영 체제마다 글꼴 렌더링 엔진이 다릅니다. 크게 다릅니다. CSS 설정 방법에 따라 최소 1 픽셀 차이를 일으키기에 충분합니다.
나의 첫 번째 추측은 창문과 관련이있는 것입니다. 나는 이것이 Firefox에서 일어나는 것을 기억하지 못하지만 어쨌든 창을 크기를 조정하십시오. 실제로 1px 너비가 숨겨진 프레임이나 그 공간과 같은 공간을 차지하는 것이있을 수도 있습니다. 당신이 실제로 어떻게했는지 모르기 때문에 이것들은 완전히 마크에서 벗어날 수 있습니다.
가능한 해결 방법은 IMG 태그를 사용하는 대신 이미지 중 하나를 DIV의 배경으로 표시하므로 1px 끄기를하면 래핑하는 대신 단순히 잘린 것입니다.
이 문제가 한 번 보았고, 사용자가 페이지를 확대했으며 줌으로 수학 반올림 문제가 발생했습니다. 나는 실수로 내 페이지를 120%로 확대했으며, 그들은 당신의 정상 100%를 가졌습니다.
브라우저에서 현재 업데이트를 통해 브라우저 줌 설정은 시스템의 DPI 설정을 취합니다.
Windows 7에서 DPI = 125%를 설정하면 브라우저 창의 100% 줌에서 줌 효과가 생성됩니다.
따라서 이것은 HTML과 관련이 없습니다. 즉, 너비 = 300px의 설정은 동일한 줌 설정이 있지만 다른 DPI 설정으로 동일한 브라우저에서 다른 크기 상자를 생성합니다.
DPI = 125 %가 더 큰 상자를 생산합니다.
따라서 줌 레벨을 줄이려면 CTRL +를 눌러 브라우저를 확대하거나 시스템의 DPI 설정을 줄이십시오.
