What Cross-Browser issues have you faced? [closed]

Answer 1

my only nightmare is IE6 you should always look for hacks but everytime you face a problem with it there is someone who ran into it before you and blogged about it (and we will never get away from it )

Answer 2

In internet explorer (note: older versions of IE, not necessarily versions 9/10+), if you create form elements using document.createElement, the field won't be submitted with the form. The only workaround is to use

element.innerHTML = "<input type='text' value="+val+" name="+name+">";

Answer 3

To remove iframe borders in Internet Explorer you have to specify the frameborder attribute as camelCase format, which is non xhtml compliant.

<iframe frameBorder="0"/>

Answer 4

An easy way to help with the pesky IE display issues is to use firebug, Yep enen in IE 6/7/8 Just use Firebug Lite

If you add the following as a bookmark and stick it on your tool bar it will enable firebug lite off any webpage with a single click. (only check this in IE and it works fine.)

javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Answer 5

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

• Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.

• onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.

• You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().

• When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).

• Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.

• Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.

• Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)

• IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)

• I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.

• The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.

• Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.

• In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.

• In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

Answer 6

IE6? Meh. You guys have got it easy! You've never had to make CSS layout work in Netscape 4 (without crashing the entire browser)? You've never had to write for appliance browsers that don't support tables? You've never had to write for IE Mobile?

• there is no support for JavaScript-assigned event handlers; you can only write an event handler through setting “onclick="somestring"” in innerHTML;

• most basic DOM Level 1 properties (eg. nodeName, nodeType, nodeValue, firstChild, lastChild, nextSibling, previousSibling, data, value, HTMLElement.getElementsByTagName, all HTMLTableElement members, most CSSStyleDeclaration members) simply do not exist;

• most CSS layout properties do not work; many simply CSS properties like ‘width’ don't work on some elements such as form fields;

• setting many other CSS properties on elements like tables and form fields causes an instant browser hang, which, since Windows Mobile has no built-in task manager, means you have to soft-reset the device;

• oh, and putting anything but text inside a <button> is insta-crash too;

• huge chunks of basic JavaScript methods and “DOM Level 0” methods going back as far as Netscape 2 (!) are missing.

And this is the most up-to-date release of Microsoft's flagship Windows Mobile browser in 2009.

Sure, it supports XMLHttpRequest, but writing AJAX code on a browser whose CSS and script support is less than IE3 (!) is bizarrely schizophrenic, like you're working with a weird amalgam of 21st-century and 19th-century technologies.

I wouldn't recommend it.