Underscore (_) rendering issues with Cascading Style Sheets (CSS) in Internet Explorer (IE), Firefox, and other browsers
The World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) 2 specifications introduced the underscore (_) as a valid CSS naming character, this allows CSS selectors like class selectors and ID selectors to be named like:
- ._menu_item_1
- #_menu_item_2
- .menu_item_3
- #menu_item_4
However; rendering inconsistencies remain among most popular browsers when Styles, Classes, or IDs are preceded by the underscore character.
Inconsistencies:
CSS Classes and IDs with an underscore immediately after their respective delimiter (‘.’ Or ‘#’) are rendered by both Firefox and Opera, but NOT by Internet Explorer.
This CSS example will NOT work in Internet Explorer, but WILL work in Firefox and Opera:
._idTest1{
background-color: red;
}
#_id_Test2{
background-color: red;
Style entries preceded by an underscore are rendered by Internet Explorer (IE 6 & 7), but NOT by Mozilla / Gecko (Firefox) or Opera.
This CSS example will only work in Internet Explorer:
*{
_color: green;
}
This is a documented quirk and bug, see The Underscore Hack and IE Underscore Bug Test for more information.
The Results of our Underscored CSS in Internet Explorer:
The Results of our Underscored CSS in FireFox (rendered the same in Opera):
This CSS quirk came up in an ASP.NET forum, where a poster was having cross browser issues with his menu controls. We discovered that <xhtmlConformance mode=”Legacy” /> was defined in his web.config file which caused the ASP.NET Master Page control (ctl00) to be preceded by an underscore (_ctl00) which was preventing the CSS from being rendered in IE.
Related links:
The IE Underscore Bug Test
The original forum thread: menu control in master page does not get styles in ie 6.0.
ScottGu’s Blog: Gotcha: Don’t use <xhtmlConformance mode=”Legacy”/> with ASP.NET AJAX
View the complete source code for my Underscore Test or try it on your favorite browser here.