I'm tracking down some cross-compatibility issues in an ASP.NET WebForms project, and I'm running across some peculiar behavior. Hitting the same page with different browsers yields different results, which happens all too often. What's curious about this case is when I view source in different browsers, it's showing me different html.
IE 10:
<td id="ctl00_MainMenu-menuItem010" onclick="javascript:skm_closeSubMenus(document.getElementById('ctl00_MainMenu'));location.href='../Nurse/nurses_patients.aspx';" onmouseover="javascript:skm_mousedOverMenu('ctl00_MainMenu',this, document.getElementById('ctl00_MainMenu'), false, '');skm_shimSetVisibility(true,'ctl00_MainMenu-menuItem010-subMenu');" onmouseout="javascript:skm_mousedOutMenu('ctl00_MainMenu', this, '');this.className='';" style="cursor:hand;"><font face="Verdana"><b>Patients</b></font></td>
FF:
<td id="ctl00_MainMenu-menuItem010" onclick="javascript:skm_closeSubMenus(document.getElementById('ctl00_MainMenu'));location.href='../Nurse/nurses_patients.aspx';" onmouseover="javascript:skm_mousedOverMenu('ctl00_MainMenu',this, document.getElementById('ctl00_MainMenu'), false, '');" onmouseout="javascript:skm_mousedOutMenu('ctl00_MainMenu', this, '');this.className='';" style="cursor:pointer;">Patients</td>
Chrome:
<td id="ctl00_MainMenu-menuItem010" onclick="javascript:skm_closeSubMenus(document.getElementById('ctl00_MainMenu'));location.href='../Nurse/nurses_patients.aspx';" onmouseover="javascript:skm_mousedOverMenu('ctl00_MainMenu',this, document.getElementById('ctl00_MainMenu'), false, '');" onmouseout="javascript:skm_mousedOutMenu('ctl00_MainMenu', this, '');this.className='';" style="cursor:pointer;">Patients</td>
Note the extra <font> and <b> tags in the IE version. This is an old app I'm doing maintenance on. It's using an skm Menu control and the bold and Verdana font are explicitly set in the control's attributes.
<SKM:menu id="MainMenu" runat="server" Cursor="Pointer" ItemPadding="7" Font-Bold="True" Font-Size="12px"
Font-Names="Verdana" ItemSpacing="0" BorderColor="Black" BorderWidth="1px" BorderStyle="solid" GridLines="Both"
BackColor="silver" Layout="Horizontal">
<SelectedMenuItemStyle ForeColor="Red" BackColor="White" />
</SKM:menu>
Further perplexing me, this is the html we see with View Source using IE9:
<td id="ctl00_MainMenu-menuItem010" onclick="javascript:skm_closeSubMenus(document.getElementById('ctl00_MainMenu'));location.href='../Nurse/nurses_patients.aspx';" onmouseover="javascript:skm_mousedOverMenu('ctl00_MainMenu',this, document.getElementById('ctl00_MainMenu'), false, '');skm_shimSetVisibility(true,'ctl00_MainMenu-menuItem010-subMenu');" onmouseout="javascript:skm_mousedOutMenu('ctl00_MainMenu', this, '');this.className='';" style="cursor:hand;">Patients</td>
I'm trying to track down whether it's the server rendering different html based on the UserAgent or if the browsers are trying to be smart by making changes on-the-fly and showing the "cleaned-up" version when you view source. Hopefully, it's not some combination of both.
Edit: I (or rather the customer) didn't notice this until I migrated the host from a Win2k3 server to a Win2k3 R2 server. If I hit the R2 server from IE10, I get those extra tags. If I hit the non-R2 server from IE10, I don't get those tags. Exact same code and both IIS6.
It is possible that ASP.NET controls will emit different HTML for different browsers, especially different versions of IE. They will try to do that based on detected browser abilities (script support, CSS support etc.).
Older ASP.NET applications (prior .NET 4.5) are not aware of modern browsers such as IE10 and this detection may be incorrect, leading to various issues. You may try to update browser definitions to help correct detection.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With