Admin menu display broken when hovering item on IE8

[firebird75]

This problem is present only in WP 3.3. In IE8, when the admin is opened in regular mode (problem doesn't happen if the browser is set to compatibility mode), the menuitem that is hovered is broken on the left. Part of the icon is cropped.

This happen to all menuitems when you hover them except the ones that aren't expanding (when they have only one subitem).

The problem doesn't happen on Firefox.

Confirmed.

I have identified a fix for this issue. The following CSS style should be updated :

#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
#adminmenu li.menu-top:hover .wp-menu-arrow,
#adminmenu li.current .wp-menu-arrow,
#adminmenu li.focused .wp-menu-arrow,
#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div {
display: none\0;
}

The display:none\0; is a CSS hack that will apply only to IE8 and allow to fix the issue. The \0 is applied to make sure the CSS isn't applied to any other browser than IE8.

While waiting for the WP next release to include the fix, here is the way to fix it :

if (is_admin() && $wp_version >= '3.3')
    echo '<style type="text/css" media="screen"><!-- #adminmenu li.wp-has-current-submenu .wp-menu-arrow,#adminmenu li.menu-top:hover .wp-menu-arrow,#adminmenu li.current .wp-menu-arrow,#adminmenu li.focused .wp-menu-arrow,#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div {display: none\0;} --></style>';

This code should be loaded at the end of the admin header through the right hook.

There is an ie8 class on the html element you can use instead of a CSS hack.

diff to hide the stray div in ie8

Added The Following At line 1816 in wp-admin.dev.css and updated wp-admin.css

.ie8 #adminmenu .wp-menu-arrow{
    display:none!important; /*Hide The Menu Arrow Always In IE8 - http://core.trac.wordpress.org/ticket/19586 */
}

In [20633]:

Always hide the admin menu arrow in IE8 (doesn't work there), props casben79, SergeyBiryukov, fixes #19586