성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Reordering on an Alpha processor ;...
[정성태] 공유 감사합니다. ^^ 참고로, WPF에서 WindowsF...
[Tom Lee] 답변 감사합니다. 나름의 해결책 연구해보고 여기에도 공유해봅니다...
[정성태] 아래의 글을 보면, MoveWindow 하면 될 듯한데요. ^^...
[Tom Lee] 안녕하세요 올려주신 글 참고하여 WPF 어플리케이션 안에 Uni...
[정성태] A graphical depiction of the steps ...
[정성태] 질문을 주셔서 출판사 측에 문의를 했습니다. 약 한 달 정도 후...
[Thorondor
] @정성태 개인 블로그인데도 거의 커뮤니티 급 인 것 같아요. 요...
[정성태] Roll A Lisp In C - Reading ; https...
[정성태] Java - How to use the Foreign Funct...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Internet Explorer 11에서 ASP.NET 컨트롤의 크기가 달라지는 문제</h1> <p> IE 11의 경우 user-agent가 달라지면서 기존 ASP.NET 웹 사이트에 포함된 WebForm 컨트롤들의 크기가 달라지는 문제가 있습니다. 가령, asp:TextBox 컨트롤의 경우 다음과 같이 명시적으로 Width, Height를 지정하면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <asp:TextBox ... runat="server" <span style='color: blue; font-weight: bold'>Width="100%" Height="84px"</span> TextMode="MultiLine" > </asp:TextBox> </pre> <br /> IE 10 이하에서는 다음과 같이 style 속에 반영되어 렌더링이 정상적으로 이뤄지는 반면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <textarea ... style="width: 100%; height: 84px;"></textarea> </pre> <br /> IE 11에서는 지정된 Width/Height값이 사라져 버립니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <textarea ... ></textarea> </pre> <br /> 검색해 보니, 이 문제가 예전에 Firefox에서도 있었던 듯 싶습니다. 제가 firefox를 사용하질 않아서 한 번도 제 웹 사이트가 그런 식으로 보인 적이 없어서 몰랐지만, 다른 사이트에서는 firefox에서 HTML 렌더링에 width/height 값이 빠져서 보여지는 현상이 있었던 것입니다. 원인은, firefox의 브라우저를 예전 웹 브라우저로 판단해서라는데요.<br /> <br /> 따라서, user-agent가 전통적인 IE를 따르지 않는 11버전도 ASP.NET 웹 폼 컨트롤들의 HTML 렌더링이 그렇게 동작하게 된 것입니다.<br /> <br /> 그렇다면 이것을 어떻게 해결해야 할까요?<br /> <br /> 첫 번째 방법은 Firefox에서도 그랬던 것처럼 IE 11을 ASP.NET 측에서 감지하는 것입니다. 이 방법에 대해서는 예전에도 한번 소개해 드렸는데요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Sysnet 웹 사이트의 HTML5 변환 기록 - 두 번째 이야기 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1080'>http://www.sysnet.pe.kr/2/0/1080</a> </pre> <br /> 그래서 .browser 파일에 IE 11을 위한 설정을 추가하면 되는데 다음의 글에 가져다 쓸 수 있는 예제가 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > ASP.NET website issues with Windows 8.1/IE 11 browser ; <a target='tab' href='http://stackoverflow.com/questions/18526328/asp-net-website-issues-with-windows-8-1-ie-11-browser'>http://stackoverflow.com/questions/18526328/asp-net-website-issues-with-windows-8-1-ie-11-browser</a> </pre> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <browsers> <!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko --> <browser id="MicrosoftIE11" parentID="Mozilla"> <identification> <userAgent match="Trident/(?'layoutVersion'\d+).*rv:(?'revision'(?'major'\d+)(\.(?'minor'\d+)?))" /> <userAgent nonMatch="MSIE" /> </identification> <capabilities> <capability name="browser" value="IE" /> <capability name="layoutEngine" value="Trident" /> <capability name="layoutEngineVersion" value="${layoutVersion}" /> <capability name="isColor" value="true" /> <capability name="screenBitDepth" value="8" /> <capability name="ecmascriptversion" value="3.0" /> <capability name="jscriptversion" value="6.0" /> <capability name="javascript" value="true" /> <capability name="javascriptversion" value="1.5" /> <capability name="w3cdomversion" value="1.0" /> <capability name="ExchangeOmaSupported" value="true" /> <capability name="activexcontrols" value="true" /> <capability name="backgroundsounds" value="true" /> <capability name="cookies" value="true" /> <capability name="frames" value="true" /> <capability name="javaapplets" value="true" /> <capability name="supportsCallback" value="true" /> <capability name="supportsFileUpload" value="true" /> <capability name="supportsMultilineTextBoxDisplay" value="true" /> <capability name="supportsMaintainScrollPositionOnPostback" value="true" /> <capability name="supportsVCard" value="true" /> <capability name="supportsXmlHttp" value="true" /> <capability name="tables" value="true" /> <capability name="supportsAccessKeyAttribute" value="true" /> <capability name="tagwriter" value="System.Web.UI.HtmlTextWriter" /> <capability name="vbscript" value="true" /> <capability name="revmajor" value="${major}" /> <capability name="revminor" value="${minor}" /> </capabilities> </browser> </browsers> </pre> <br /> 두 번째 방법으로 .aspx의 태그 값을 Width/Height에서 style 구문으로 바꿔 넣는 것도 있습니다. 가령 이렇게 정의된 값을,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <asp:TextBox ... runat="server" <span style='color: blue; font-weight: bold'>Width="100%" Height="84px" </span> TextMode="MultiLine" > </asp:TextBox> </pre> <br /> style로 직접 지정하면 되는 것입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <asp:TextBox ... runat="server" style="width: 100%; height: 84px" TextMode="MultiLine"> </asp:TextBox> </pre> <br /> 물론, 소스코드를 수정하는 것보다는 App_Browsers 폴더에 .browser 파일을 추가하는 편이 더 낫습니다.<br /> <br /> 이것이 끝이 아닙니다. "<a target='tab' href='http://stackoverflow.com/questions/18526328/asp-net-website-issues-with-windows-8-1-ie-11-browser'>ASP.NET website issues with Windows 8.1/IE 11 browser</a>" 글에 보면 세 번째 방법도 있습니다. 이 문제로 인해 공개된 다음의 업데이트를 설치해 주는 것입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > An update is available for the .NET Framework 4 on Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008, Windows 7, and Windows Server 2008 R2: October 2013 ; <a target='tab' href='http://support.microsoft.com/kb/2836939/en-us'>http://support.microsoft.com/kb/2836939/en-us</a> </pre> <br /> 위의 업데이트가 해결해 주는 내용에 보면 이슈 2번이 바로 우리가 겪는 문제인 것입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Issue 2 When you access an ASP.NET-based webpage by using Internet Explorer 11, the webpage renders the content incorrectly. Note This issue occurs because Internet Explorer 11 is not recognized as Internet Explorer by ASP.NET. </pre> <br /> 아니, 그런데 sysnet 웹 사이트는 azure에서 호스트 받고 있어 웹 서버가 Windows Server 2008 R2로 자동 할당되는데 이 경우에는 어떻게 해야할까요? 간단합니다. ^^ Azure 배포 프로젝트에 보면 ServiceConfiguration.Cloud.cscfg 이름의 파일이 있는데요. 이것의 osFamily 값을 3으로 바꿔주면 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <?xml version="1.0" encoding="utf-8"?> <ServiceConfiguration ...<span style='color: blue; font-weight: bold'> osFamily="3"</span> osVersion="*" schemaVersion="2013-10.2.2"> ... </ServiceConfiguration> </pre> <br /> 이 값에 대한 설명은 다음의 문서에 나와 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Windows Azure Service Configuration Schema (.cscfg File) ; <a target='tab' href='https://docs.microsoft.com/en-us/previous-versions/azure/reference/ee758710(v=azure.100)'>https://docs.microsoft.com/en-us/previous-versions/azure/reference/ee758710(v=azure.100)</a> </pre> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 1 - Specifies the OS family that is substantially compatible with Windows Server 2008 SP2. 2 - Specifies the OS family that is substantially compatible with Windows Server 2008 R2. 3 - Specifies the OS family that is substantially compatible with Windows Server 2012. </pre> <br /> 즉, IE 11 렌더링 문제를 해결하는 4번째 방법은 운영체제를 2012로 업그레이드하는 것입니다. ^^ (그래서 제 홈페이지의 경우 osFamily를 3으로 바꾸는 작업만 했습니다.)<br /> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
7064
(왼쪽의 숫자를 입력해야 합니다.)