Another Instance of IE vs Firefox vs Standards

Here's another example of behavioral differences between IE and Firefox. I ran into this one about a month ago and then again this morning.

I currently have some webpages where I'm dynamically displaying and hiding controls. This is done via JavaScript/DOM by setting the style.display property of the control I wish to hide or display. To hide a control, setting this property to none does the trick, but to display it, there's a way that works only in IE, and a way that works for both IE and Firefox -- which would be the correct way of doing it.

In IE, setting the style.display property to block will re-display the control after it has been hidden, and will display it correctly. But in Firefox, doing this will display the control again but in a different way -- for example, the height of the control as it was before it was hidden is no longer maintained.

The correct way of doing this is to set the style.display property to an empty string. Apparently, this is the "standards" way of doing it (although it's not exactly intuitive -- I mean, really. A blank string?). Doing it this way will work in both IE and Firefox.

Example: = '';

I hope this saves someone some time.


Popular Posts

How To Mock Out Child Components In Unit Tests of Angular 2 Code

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

A Red Herring When Using Moq to Mock Methods With Optional Parameters

Unit Testing with a Mock Entity Framework DbContext and Fake DbSets