Search code examples
javascriptjqueryinternet-explorertinymcedesignmode

IE designMode Showing display:none Divs

I've done a lot of research on this,but I'm unable to solve this problem. I've got a Div with several Divs within it that I want to hide before switching on a TinyMCE instance.

I'm doing this via jQuery - 

$(".drop").hide()

This works fine, and every browser engine except Trident (IE) hides them. If I inspect the elements in IE, the css indicates "display:none".

I found a few articles and notes about how this is a feature of IE to show those elements, including this one on MSDN: http://msdn.microsoft.com/en-us/library/aa770023(VS.85).aspx

The problem is that I need those to hide. Any ideas?

Solution

  • This is because inside an editable element IE makes everything, including elements hidden with display: none, editable. There's nothing you can do about it except remove the elements you wish to hide from the page's DOM.

    There's a reference to this behaviour of IE here: http://msdn.microsoft.com/en-us/library/aa770023%28VS.85%29.aspx