What Cross-Browser issues have you faced?

Question

While developing for multiple sets of browsers, what issues have you faced while development due to differences in browser implementation?

To start with I am listing some of those which i faced:

• A text node in Firefox allows only 4K data. So an XML Ajax response gets split up into multiple text child nodes instead of only one node. Its fine in Internet Explorer. For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods
• Internet Explorer does not replace   or HTML char code 160, you need to replace its Unicode equivalent \u00a0
• In Firefox a dynamically created input field inside a form (created using document.createElement) does not pass its value on form submit.
• document.getElementById in Internet Explorer will return an element even if the element name matches. Mozilla only returns element if id matches.
• In Internet Explorer if a select box has a value not represented by any of the options, it will display blank, Firefox displays the first option.

Answer 1

The only one that really gets to me:

• IE6 is still used by ~18% of the web -- that's nearly 1 in 5 -- and addressing its issues is time consuming, hackish, and frustrating. ;) The issues are really too numerous to list here.

If you're interested in the issues themselves, QuirksMode.org is an amazing resource I used every day before making the leap to client-side libraries. Also check out John Resig's The DOM is a Mess presentation at yahoo, which gives a lot of theory about how to deal with cross-browser topics efficiently.

However, if you're interested in simply having them solved, your question is an excellent example of why many consider using client-side libraries like jQuery, YahooUI, MooTools, Dojo, etc. With a thriving community, talented people and corporate backing projects like those allow you to focus on your app rather than these issues.

Here are some jQuery examples that avoid much of the cross-browser frustration and can really make all of this.. fun.

Cross-browser mouse click binding

$('#select anything + you[want=using] ~ css:selectors').click(
    function(){ 
       alert('hi');
    }
); 

Cross-browser HTML Injection

$('#anElementWithThisId').html('<span>anything you want</span>');

Cross-browser Ajax (all request objects are still made available to you)

$('p.message').load('/folder/file.html');

And what really blows me away, load a data subset with selectors (see manual for details)

$('p.message').load('/folder/file.html body p:first-child');

Now, how all this really starts to get fun: chaining methods together

$('ul.menu a').click(           // bind click event to all matched objects
  function(evt){                // stnd event object is the first parameter
    evt.preventDefault();       // method is cross-browser thx to jquery
    $(this)                     // this = the clicked 'a' tag, like raw js
      .addClass('selected')     // add a 'selected' css class to it
      .closest('ul.menu')       // climb the dom tree back up to the ul
      .find('a.selected')       // find any existing selected dom children
      .not(this)                // filter out this element from matches
      .removeClass('selected'); // remove 'selected' css class
  }
)

Reminds me of Joel's Can Your Programming Language Do This? article.

Taking all this to a theoretical level, true advancement doesn't come from what you can do with conscious thought and effort, but rather what you can do automatically (without thought or effort). Joel has a segment on this in Smart And Gets Things Done regarding interviewing questions and smart developers, completely changed my approach to programming.

Similar to a pianist who can just 'play' the music because she knows all the keys, your advancement comes not from doing more things that require thought but rather more things that require no thought. The goal then becomes making all the basics easy.. natural.. subconscious.. so we can all geek out on our higher level goals.

Client side libraries, in a way, help us do just that. ;)