将元素绝对定位在固定位置的div IE中不起作用

Question

OK, this is driving me crazy now, I already messed with all my code and still can't get this to work.

I am developing a WP theme and for it I am offering users the possibility to choose between a fixed header or a fluid one.

The problem comes when the user selects the fixed one under IE where the dropdown menu is not showing at all.

I created an example site here: http://makanudos.com/tests/ for anyone who may be willing to help me.

Thanks a lot in advance!

Answer 1

Wow, took me a while to find this one… and it's a bug in IE8.

#menuConquistador { filter: alpha(opacity=96); }

is breaking the display in IE8. Disabling it makes the menu appear as expected.

I thought it would be as simple as setting it differently as this article suggests , however, even using the correct IE8 -ms-filter extension causes the sub-menu to hide under the rest of the page.

Edit: You might find some workarounds here if you really need a 96% opaque menu :-) Personally, I'd just remove the filter for IE7/8. Users with decent browsers can get the nice transparent effect.

Also, just found Internet Explorer CSS property "filter" ignores overflow:visible

Edit 2: OK, so adding

#menuConquistador { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)'; }

and removing the z-index:10000 (there seems to be two for the #menuConquistador selector) allows the menu appear in IE8 and have opacity!