Internet Explorer 11에서 ASP.NET 컨트롤의 크기가 달라지는 문제
IE 11의 경우 user-agent가 달라지면서 기존 ASP.NET 웹 사이트에 포함된 WebForm 컨트롤들의 크기가 달라지는 문제가 있습니다. 가령, asp:TextBox 컨트롤의 경우 다음과 같이 명시적으로 Width, Height를 지정하면,
<asp:TextBox ... runat="server" Width="100%" Height="84px" TextMode="MultiLine" > </asp:TextBox>
IE 10 이하에서는 다음과 같이 style 속에 반영되어 렌더링이 정상적으로 이뤄지는 반면,
<textarea ... style="width: 100%; height: 84px;"></textarea>
IE 11에서는 지정된 Width/Height값이 사라져 버립니다.
<textarea ... ></textarea>
검색해 보니, 이 문제가 예전에 Firefox에서도 있었던 듯 싶습니다. 제가 firefox를 사용하질 않아서 한 번도 제 웹 사이트가 그런 식으로 보인 적이 없어서 몰랐지만, 다른 사이트에서는 firefox에서 HTML 렌더링에 width/height 값이 빠져서 보여지는 현상이 있었던 것입니다. 원인은, firefox의 브라우저를 예전 웹 브라우저로 판단해서라는데요.
따라서, user-agent가 전통적인 IE를 따르지 않는 11버전도 ASP.NET 웹 폼 컨트롤들의 HTML 렌더링이 그렇게 동작하게 된 것입니다.
그렇다면 이것을 어떻게 해결해야 할까요?
첫 번째 방법은 Firefox에서도 그랬던 것처럼 IE 11을 ASP.NET 측에서 감지하는 것입니다. 이 방법에 대해서는 예전에도 한번 소개해 드렸는데요.
Sysnet 웹 사이트의 HTML5 변환 기록 - 두 번째 이야기
; https://www.sysnet.pe.kr/2/0/1080
그래서 .browser 파일에 IE 11을 위한 설정을 추가하면 되는데 다음의 글에 가져다 쓸 수 있는 예제가 있습니다.
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
<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>
두 번째 방법으로 .aspx의 태그 값을 Width/Height에서 style 구문으로 바꿔 넣는 것도 있습니다. 가령 이렇게 정의된 값을,
<asp:TextBox ... runat="server" Width="100%" Height="84px" TextMode="MultiLine" >
</asp:TextBox>
style로 직접 지정하면 되는 것입니다.
<asp:TextBox ... runat="server" style="width: 100%; height: 84px" TextMode="MultiLine">
</asp:TextBox>
물론, 소스코드를 수정하는 것보다는 App_Browsers 폴더에 .browser 파일을 추가하는 편이 더 낫습니다.
이것이 끝이 아닙니다. "
ASP.NET website issues with Windows 8.1/IE 11 browser" 글에 보면 세 번째 방법도 있습니다. 이 문제로 인해 공개된 다음의 업데이트를 설치해 주는 것입니다.
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
; http://support.microsoft.com/kb/2836939/en-us
위의 업데이트가 해결해 주는 내용에 보면 이슈 2번이 바로 우리가 겪는 문제인 것입니다.
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.
아니, 그런데 sysnet 웹 사이트는 azure에서 호스트 받고 있어 웹 서버가 Windows Server 2008 R2로 자동 할당되는데 이 경우에는 어떻게 해야할까요? 간단합니다. ^^ Azure 배포 프로젝트에 보면 ServiceConfiguration.Cloud.cscfg 이름의 파일이 있는데요. 이것의 osFamily 값을 3으로 바꿔주면 됩니다.
<?xml version="1.0" encoding="utf-8"?>
<ServiceConfiguration ... osFamily="3" osVersion="*" schemaVersion="2013-10.2.2">
...
</ServiceConfiguration>
이 값에 대한 설명은 다음의 문서에 나와 있습니다.
Windows Azure Service Configuration Schema (.cscfg File)
; https://docs.microsoft.com/en-us/previous-versions/azure/reference/ee758710(v=azure.100)
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.
즉, IE 11 렌더링 문제를 해결하는 4번째 방법은 운영체제를 2012로 업그레이드하는 것입니다. ^^ (그래서 제 홈페이지의 경우 osFamily를 3으로 바꾸는 작업만 했습니다.)
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]