Web browsers differences: Difference between revisions

Revision as of 15:06, 18 April 2008

Debugging JavaScript on IE is a lot harder than on FF. The best is to install Firebug Lite. However, you must not use console.log() before the window is loaded (else you'll get a very annoying fatal error saying IE cannot open the page).
Only use Prototype JS code or you'll run into troubles (mainly because all elements should be extended Prototype elements to ensure cross-browser behavior).
IE caches *a lot*. In particular Ajax requests can be cached! Be sure to put some caching directives on the server side, else IE simply won't hit your server again. It'll use the cached version.

IE 7 has a bug regarding elements with z-index (absolutely positioned elements with relatively positioned parents).
IE does not properly support CSS comments; multiple CSS comments on one line, with an actual property / value set, confuses the poor piece of crap.
IE seems to have a bug when multiple floated divs are present on a container, with their widths in percentage. If the percentage amounts to exactly one hundred (100%), then it will not render correctly. To fix this, you can just make the widths go only to 99% if possible.
IE does not like absolute positioning on anchor elements or images; but you can usually fix it by wrapping in a div or span. Apparently for IE it is better to give both top and left properties for absolutely positioned elements (eg, both coordinates).
text-align: center can also cause misbehavior, usually you can fix it by only applying this property to a subelement.
IE 7 does not support attribute selector when the attribute is "for" (on a label).
IE 7 has a strange behavior on an absolutely positioned element when top: is used (bottom is fine) and the relatively positioned ancestor has not a width of auto. Having a 100% width confuses IE. It is important with our technique for a generic skinning of a block for example (when the block did not have a fixed width this caused problems).

The "change" event does not work as expected on checkboxes (it fires only when the checkbox loses focus). A workaround is to use the "click" event.

IE 7 automatically adds margins to forms. You can override that behavior with CSS.

location.hash is bugged when the hash contains a question mark. Update: this seems to have been fixed.
myForm.readAttribute("action") behaves differently in Opera, as it adds the hostname before (which is bad!). The bug was apparently fixed in Opera 9.50 (see this bug reference).
Opera automatically adds margins to forms.
Opera does not fire the "load" event on an newly created image, which has already been downloaded (eg, whose source corresponds to an already fetched element). This is probably a bug that hopefully will be fixed.

When using an element with fixed position at the bottom of the page, you usually add an absolutely positioned element with a negative bottom value to provide scrolling. This technique does not seem to work very well in Opera.

@@ Line 35: / Line 35: @@
 * Opera automatically adds margins to forms.
 * Opera does not fire the "load" event on an newly created image, which has already been downloaded (eg, whose source corresponds to an already fetched element). This is probably a bug that hopefully will be fixed.
+=== CSS ===
+* When using an element with fixed position at the bottom of the page, you usually add an absolutely positioned element with a negative bottom value to provide scrolling. This technique does not seem to work very well in Opera.