CSS는 개발 환경과 웹 서버에서 다르게 렌더링됩니다.
개발 환경에서 만든 웹 응용 프로그램을 웹 서버에 업로드 한 후 다르게 표시되는 문제가 있습니다.
페이지를보기 위해 동일한 브라우저와 동일한 컴퓨터를 사용하고 있습니다. 유일한 차이점은 "서버"입니다. .net 3.5를 사용하고 있으며 개발 환경에서 페이지는 ASP.net 개발 서버를 사용하여 제공됩니다. 웹 서버에서 페이지는 IIS 6.0을 사용하여 제공됩니다.
응용 프로그램의 모든 CSS를 제어하는 데 사용되는 "App_Themes / Default"폴더에 포함 된 CSS 파일이 하나뿐입니다.
다음은 동일하게 표시되지 않는 몇 가지 항목입니다.
1) 확장시 다른 모든 페이지 요소 위에 표시되는 축소 가능한 패널 컨트롤이 있습니다. 개발 환경에서는 올바르게 작동합니다. 웹 서버에서 패널은 다른 요소 아래로 미끄러집니다.
2) 배경과 특정 글꼴 크기로 요소를 정의했습니다. 내 개발 환경에 표시되면 텍스트가 한 줄에 표시됩니다. 그러나 웹 서버에서는 텍스트 크기가 같더라도 텍스트가 줄 바꿈됩니다. 포함하는 div가 어떻게 든 "더 작게"렌더링되는 것과 같습니다.
3) 너비가 고정되지 않은 버튼의 너비 (따라서 너비는 버튼 텍스트에 따라 결정됨)는 개발 환경과 웹 서버간에 다릅니다. 서버의 botton은 항상 더 넓습니다.
서버와 개발 환경의 machine.config 및 전역 web.config에 다른 CSS 요소에 대한 참조가 없는지 확인했습니다.
일반적으로 비슷해 보이므로 (동일한 색상, 배경, 글꼴 스타일 등) 서버가 CSS에서 읽는다는 것을 알고 있습니다. 크기가 벗어난 것처럼 보이고 div의 레이어링이 나타납니다.
전에이 문제를 겪은 사람이 있습니까? 내가 무엇을 찾을 수 있는지에 대한 아이디어가 있습니까?
Internet Explorer 8에서 비교하고있는 것 같습니다. Microsoft는 웹 개발자가 눈물을 흘리기 위해 로컬 및 인터넷 서버에 대해 서로 다른 렌더링 모드를 도입했습니다.
X-UA-Compatible 값이없고 사이트가 로컬 인트라넷 보안 영역에있는 경우 기본적으로 EmulateIE7 모드로 렌더링됩니다.
X-UA-Compatible 헤더 또는 META를 추가하여 전체 IE8 표준 모드를 적용합니다.
참조 http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/
호환성 모드에도 문제가 있었기 때문에 다음을 추가했습니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
IE7, 8 및 9에서 잘 작동한다는 것을 알았 기 때문에
Google 크롬에서도 같은 문제가 발생했습니다. 페이지를 확대하거나 축소하면 미디어 쿼리가 엉망이됩니다. 두 사이트의 확대 / 축소 수준이 100 %인지 확인하세요.
이것은 최소한 프로덕션 서버가 HTML에 xml 선언을 추가했거나 페이지가 비표준 호환 모드에서 렌더링되는 원인이 된 doctype 을 변경 한 것처럼 들립니다 . 이것은 쿼크 모드로도 알려져 있으며 MSIE에서 매우 좋은 결과를 볼 수 있습니다. 설명하신 증상 은 MSIE에서 박스 모델 버그 로 인식 할 수 있습니다 .
페이지를 마우스 오른쪽 버튼으로 클릭하고 HTML 소스를 확인하십시오. 둘은 정확히 같은? (메타 태그, xml 선언, 공백 등 포함)
Windows에서 Linux로 FTP를 사용하는 경우 공백 (공백, 줄 바꿈)이 변경되지 않도록 바이너리 모드로 전송하고 있는지 확인하십시오. 또한 문서를 .NET Framework와 같은 MS 독점 인코딩이 아닌 UTF-8(또는 적어도 ISO-8859-1) 로 저장하고 있는지 확인하십시오 CP1252.
인트라넷 사이트 설정에서이 문제가있는 사용자의 경우 "호환성보기에서 인트라넷 사이트 표시"가 선택되어 있으면 메타 태그가 문제를 해결하지 못합니다 (대부분의 경우).
서버 수준에서 HTTP 응답 헤더를 보내야합니다. 여기를 참조 하세요.
서버에서 오는 CSS는 이전 캐시 버전 일 수 있습니다. Ctrl + F5를 사용하여 페이지를 새로 고침하여 다시 요청하세요.
나에게는 Internet Explorer Compatibility View Settings가 문제였습니다.
체크 박스가 설정 해제 되면 CSS가 완벽하게 렌더링됩니다.
IE9 및 IE11에서 다음과 같은 문제가 해결되었습니다.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
web.config 파일에 다음을 추가하십시오.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=8" />
</customHeaders>
</httpProtocol>
</system.webServer>
나는 같은 문제가 있었다. 우리 네트워크는 IE11과 함께 Win7을 사용합니다. 저에게 해결책은 내 로컬 컴퓨터에서 IE의 호환성 설정> "호환성보기에 추가 한 웹 사이트"목록에 "localhost"를 추가하는 것입니다. IE> 도구> 호환성보기 설정 .
BTW our NA has every machine setting IE11 to "Display intranet sites in Compatibility View" automatically checked by a group policy.
I just had this problem. I'd changed my style sheet and HTML code. It looked great on locally but didn't work on the server. I found that in Visual Studio the CSS file's "Copy to Output Directory" was set to "Do not copy". So my CSS updates were not getting deployed. Sometimes the problem is just user error.
This often happens to me when the 'server' version is cached somehow. Refreshing did the trick. Throwing away 'temporary internet files' does it, too.
try this,.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Can be caused by minification, e.g. on dev machine you have
<span>AAA</span>
<span>BBB</span>
but on remote server it becomes
<span>AAA</span><span>BBB</span>
and a space between them gets lost.
'IT박스' 카테고리의 다른 글
| 자바 : 특정 코드 블록에 시간 초과 설정? (0) | 2020.12.01 |
|---|---|
| Assert.AreNotEqual과 Assert.AreNotSame의 차이점은 무엇입니까? (0) | 2020.11.30 |
| WPF TextBox에 이벤트 붙여 넣기 (0) | 2020.11.30 |
| Visual Studio 솔루션에서 모든 중단 점 지우기 (0) | 2020.11.30 |
| 동적 파이썬 객체를 json으로 변환 (0) | 2020.11.30 |