StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
2599388
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
2010-04-11T01:22:04
CreationDate
2010-04-08T11:26:32.563
FavoriteCount
0
LastActivityDate
2013-01-22T13:49:25.073
LastEditDate
2017-05-23T12:34:04.237
LastEditorUserId
-1
OwnerUserId
304185
ParentId
2599020
PostTypeId
2
Score
120
ViewCount
0
LastEditorDisplayName
text
Body
Please feel free to update this list if you see any errors/omissions etc. Note: IE9 fixes many of the following issues, so a lot of this only applies to IE8 and below and to a certain extent IE9 in quirks mode. For example, IE9 supports SVG, <code><canvas></code>, <code><audio></code> and <code><video></code> natively, however you must <a href="http://blogs.msdn.com/b/ie/archive/2010/09/03/same-markup-using-canvas-audio-and-video.aspx" rel="nofollow noreferrer">enable standards compliance mode</a> for them to be available. <hr> <h2>General:</h2> <ul> <li>Problems with partially loaded documents: It’s a good idea to add your JavaScript in a <code>window.onload</code> or similar event as IE doesn’t support many operations in partially loaded documents.</li> <li>Differing attributes: In CSS, it's <code>elm.style.styleFloat</code> in IE vs <code>elm.style.cssFloat</code> in Firefox. In <code><label></code> tags the <code>for</code> attribute is accessed with <code>elm.htmlFor</code> in IE vs <code>elm.for</code> in Firefox. Note that <code>for</code> is reserved in IE so <code>elm['for']</code> is probably a better idea to stop IE from raising an exception.</li> </ul> <hr> <h2>Base JavaScript language:</h2> <ul> <li>Access characters in strings: <code>'string'[0]</code> isn’t supported in IE as it’s not in the original JavaScript specifications. Use <code>'string'.charAt(0)</code> or <code>'string'.split('')[0]</code> noting that accessing items in arrays is significantly faster than using <code>charAt</code> with strings in IE (though there's some initial overhead when <code>split</code> is first called.)</li> <li>Commas before the end of objects: e.g. <code>{'foo': 'bar',}</code> aren't allowed in IE.</li> </ul> <hr> <h2>Element-specific issues:</h2> <ul> <li>Getting the <code>document</code> of an IFrame: <ul> <li>Firefox and IE8+: <code>IFrame.contentDocument</code> (IE started supporting this <a href="https://stackoverflow.com/a/6582370/304185">from version 8</a>.)</li> <li>IE: <code>IFrame.contentWindow.document</code></li> <li>(<code>IFrame.contentWindow</code> refers to the <code>window</code> in both browsers.)</li> </ul></li> <li>Canvas: Versions of IE before IE9 don't support the <code><canvas></code> element. IE does support <a href="http://en.wikipedia.org/wiki/Vector_Markup_Language" rel="nofollow noreferrer">VML</a> which is a similar technology however, and <a href="http://code.google.com/p/explorercanvas/" rel="nofollow noreferrer">explorercanvas</a> can provide an in-place wrapper for <code><canvas></code> elements for many operations. Be aware that IE8 in standards compliance mode is many times slower and has many more glitches than when in quirks mode when using VML.</li> <li>SVG: IE9 supports SVG natively. IE6-8 can support SVG, but only with <a href="http://www.planetsvg.com/content/svg-solutions-internet-explorer" rel="nofollow noreferrer">external plugins</a> with only some of those plugins supporting JavaScript manipulation.</li> <li><code><audio></code> and <code><video></code>: are only supported in IE9.</li> <li>Dynamically creating radio buttons: IE <8 has a bug which makes radio buttons created with <code>document.createElement</code> uncheckable. See also <a href="https://stackoverflow.com/questions/118693/how-do-you-dynamically-create-a-radio-button-in-javascript-that-works-in-all-brow/119079">How do you dynamically create a radio button in Javascript that works in all browsers?</a> for a way to get around this.</li> <li>Embedded JavaScript in <code><a href></code> tags and <code>onbeforeunload</code> conflicts in IE: If there's embedded JavaScript in the <code>href</code> part of an <code>a</code> tag (e.g. <code><a href="javascript: doStuff()"></code> then IE will always show the message returned from <code>onbeforeunload</code> unless the <code>onbeforeunload</code> handler is removed beforehand. See also <a href="https://stackoverflow.com/questions/2858057/javascript-function-on-web-page-close/2858329">Ask for confirm when closing a tab</a>. </li> <li><code><script></code> tag event differences: <code>onsuccess</code> and <code>onerror</code> aren't supported in IE and are replaced by an IE-specific <code>onreadystatechange</code> which is fired regardless of whether the download succeeded or failed. See also <a href="http://unixpapa.com/js/dyna.html" rel="nofollow noreferrer">JavaScript Madness</a> for more info.</li> </ul> <hr> <h2>Element size/position/scrolling and mouse position:</h2> <ul> <li>Getting element size/position: width/height of elements is sometimes <code>elm.style.pixelHeight/Width</code> in IE rather than <code>elm.offsetHeight/Width</code>, but neither is reliable in IE, especially in quirks mode, and sometimes one gives a better result than the other. <code>elm.offsetTop</code> and <code>elm.offsetLeft</code> are often incorrectly reported, leading to finding positions of elements being incorrect, which is why popup elements etc are a few pixels off in a lot of cases. Also note that if an element (or a parent of the element) has a <code>display</code> of <code>none</code> then IE will raise an exception when accessing size/position attributes rather than returning <code>0</code> as Firefox does. </li> <li>Get the screen size (Getting the viewable area of the screen): <ul> <li>Firefox: <code>window.innerWidth/innerHeight</code></li> <li>IE standards mode: <code>document.documentElement.clientWidth/clientHeight</code></li> <li>IE quirks mode: <code>document.body.clientWidth/clientHeight</code></li> </ul></li> <li>Document scroll position/mouse position: This one is actually not defined by the w3c so is non-standard even in Firefox. To find the <code>scrollLeft</code>/<code>scrollTop</code> of the <code>document</code>: <ul> <li>Firefox and IE in quirks mode: <code>document.body.scrollLeft/scrollTop</code></li> <li>IE in standards mode: <code>document.documentElement.scrollLeft/scrollTop</code></li> <li>NOTE: Some other browsers use <code>pageXOffset</code>/<code>pageYOffset</code> as well. <pre><code>function getDocScrollPos() { var x = document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset || 0, y = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0; return [x, y]; }; </code></pre></li> </ul> In order to get the position of the mouse cursor, <code>evt.clientX</code> and <code>evt.clientY</code> in <code>mousemove</code> events will give the position relative to the document without adding the scroll position so the previous function will need to be incorporated: <pre><code>var mousepos = [0, 0]; document.onmousemove = function(evt) { evt = evt || window.event; if (typeof evt.pageX != 'undefined') { // Firefox support mousepos = [evt.pageX, evt.pageY]; } else { // IE support var scrollpos = getDocScrollPos(); mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]]; }; }; </code></pre></li> </ul> <hr> <h2>Selections/ranges:</h2> <ul> <li><code><textarea></code> and <code><input></code> selections: <code>selectionStart</code> and <code>selectionEnd</code> are not implemented in IE, and there's a proprietary "ranges" system in its place, see also <a href="https://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea">Caret position in textarea, in characters from the start</a>.</li> <li>Getting the currently selected text in the document: <ul> <li>Firefox: <code>window.getSelection().toString()</code></li> <li>IE: <code>document.selection.createRange().text</code></li> </ul></li> </ul> <hr> <h2>Getting elements by ID:</h2> <ul> <li><code>document.getElementById</code> can also refer to the <code>name</code> attribute in forms (depending which is defined first in the document) so it's best not to have different elements which have the same <code>name</code> and <code>id</code>. This dates back to the days when <code>id</code> wasn't a w3c standard. <code>document.all</code> (<a href="https://stackoverflow.com/questions/2408424/">a proprietary IE-specific property</a>) is significantly faster than <code>document.getElementById</code>, but it has other problems as it always prioritizes <code>name</code> before <code>id</code>. I personally use this code, falling back with additional checks just to be sure: <pre><code>function getById(id) { var e; if (document.all) { e = document.all[id]; if (e && e.tagName && e.id === id) { return e; }; }; e = document.getElementById(id); if (e && e.id === id) { return e; } else if (!e) { return null; } else { throw 'Element found by "name" instead of "id": ' + id; }; }; </code></pre></li> </ul> <hr> <h2>Problems with read only innerHTML:</h2> <ul> <li>IE does <a href="http://msdn.microsoft.com/en-us/library/ie/ms533897%28v=vs.85%29.aspx" rel="nofollow noreferrer">not support</a> setting the innerHTML of <code>col</code>, <code>colGroup</code>, <code>frameSet</code>, <code>html</code>, <code>head</code>, <code>style</code>, <code>table</code>, <code>tBody</code>, <code>tFoot</code>, <code>tHead</code>, <code>title</code>, and <code>tr</code> elements. Here's a function which works around that for table-related elements: <pre><code>function setHTML(elm, html) { // Try innerHTML first try { elm.innerHTML = html; } catch (exc) { function getElm(html) { // Create a new element and return the first child var e = document.createElement('div'); e.innerHTML = html; return e.firstChild; }; function replace(elms) { // Remove the old elements from 'elm' while (elm.children.length) { elm.removeChild(elm.firstChild); } // Add the new elements from 'elms' to 'elm' for (var x=0; x<elms.children.length; x++) { elm.appendChild(elms.children[x]); }; }; // IE 6-8 don't support setting innerHTML for // TABLE, TBODY, TFOOT, THEAD, and TR directly var tn = elm.tagName.toLowerCase(); if (tn === 'table') { replace(getElm('<table>' + html + '</table>')); } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) { replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild); } else if (tn === 'tr') { replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild); } else { throw exc; }; }; }; </code></pre> Also note that IE requires adding a <code><tbody></code> to a <code><table></code> before appending <code><tr></code>s to that <code><tbody></code> element when creating using <code>document.createElement</code>, for example: <pre><code>var table = document.createElement('table'); var tbody = document.createElement('tbody'); var tr = document.createElement('tr'); var td = document.createElement('td'); table.appendChild(tbody); tbody.appendChild(tr); tr.appendChild(td); // and so on </code></pre></li> </ul> <hr> <h2>Event differences:</h2> <ul> <li>Getting the <code>event</code> variable: DOM events aren't passed to functions in IE and are accessible as <code>window.event</code>. One common way of getting the event is to use e.g. <code>elm.onmouseover = function(evt) {evt = evt||window.event}</code> which defaults to <code>window.event</code> if <code>evt</code> is undefined.</li> <li>Key event code differences: Key event codes vary wildly, though if you look at <a href="http://www.quirksmode.org/js/keys.html" rel="nofollow noreferrer">Quirksmode</a> or <a href="http://unixpapa.com/js/key.html" rel="nofollow noreferrer">JavaScript Madness</a>, it's hardly specific to IE, Safari and Opera are different again.</li> <li>Mouse event differences: the <code>button</code> attribute in IE is a bit-flag which allows multiple mouse buttons at once: <ul> <li>Left: 1 (<code>var isLeft = evt.button & 1</code>)</li> <li>Right: 2 (<code>var isRight = evt.button & 2</code>)</li> <li>Center: 4 (<code>var isCenter = evt.button & 4</code>) The W3C model (supported by Firefox) is less flexible than the IE model is, with only a single button allowed at once with left as <code>0</code>, right as <code>2</code> and center as <code>1</code>. Note that, as Peter-Paul Koch <a href="http://www.quirksmode.org/js/events_properties.html#button" rel="nofollow noreferrer">mentions</a>, this is very counter-intuitive, as <code>0</code> usually means 'no button'. <code>offsetX</code> and <code>offsetY</code> are <a href="http://www.quirksmode.org/dom/w3c_cssom.html#mousepos" rel="nofollow noreferrer">problematic</a> and it's probably best to avoid them in IE. A more reliable way to get the <code>offsetX</code> and <code>offsetY</code> in IE would be to <a href="https://stackoverflow.com/questions/160144/find-x-y-of-an-html-element-with-javascript">get the position</a> of the relatively positioned element and subtract it from <code>clientX</code> and <code>clientY</code>. Also note that in IE to get a double click in a <code>click</code> event you'd need to register both a <code>click</code> and <code>dblclick</code> event to a function. Firefox fires <code>click</code> as well as <code>dblclick</code> when double clicking, so IE-specific detection is needed to have the same behaviour.</li> </ul></li> <li>Differences in the event handling model: Both the proprietary IE model and the Firefox model support handling of events from the bottom up, e.g. if there are events in both elements of <code><div></div></code> then events will trigger in the <code>span</code> then the <code>div</code> rather than the order which they're bound if a traditional e.g. <code>elm.onclick = function(evt) {}</code> was used. "Capture" events are generally only supported in Firefox etc, which will trigger the <code>div</code> then the <code>span</code> events in a top down order. IE has <code>elm.setCapture()</code> and <code>elm.releaseCapture()</code> for redirecting mouse events from the document to the element (<code>elm</code> in this case) before processing other events, but they have a number of performance and other issues so should probably be avoided. <ul> <li>Firefox: Attach: <code>elm.addEventListener(type, listener, useCapture [true/false])</code> Detach: <code>elm.removeEventListener(type, listener, useCapture)</code> (<code>type</code> is e.g. <code>'mouseover'</code> without the <code>on</code>)</li> <li>IE: Only a single event of a given type on an element can be added in IE - an exception is raised if more than one event of the same type is added. Also note that the <code>this</code> refers to <code>window</code> rather than the bound element in event functions (so is less useful): Attach: <code>elm.attachEvent(sEvent, fpNotify)</code> Detach: <code>elm.detachEvent(sEvent, fpNotify)</code> (<code>sEvent</code> is e.g. <code>'onmouseover'</code>)</li> </ul></li> <li>Event attribute differences: <ul> <li>Stop events from being processed by any other listening functions: Firefox: <code>evt.stopPropagation()</code> IE: <code>evt.cancelBubble = true</code></li> <li>Stop e.g. key events from inserting characters or stopping checkboxes from getting checked: Firefox: <code>evt.preventDefault()</code> IE: <code>evt.returnValue = false</code> Note: Just returning <code>false</code> in <code>keydown</code>, <code>keypress</code>, <code>mousedown</code>, <code>mouseup</code>, <code>click</code> and <code>reset</code> will also prevent default.</li> <li>Get the element which triggered the event: Firefox: <code>evt.target</code> IE: <code>evt.srcElement</code></li> <li>Getting the element the mouse cursor moved away from: <code>evt.fromElement</code> in IE is <code>evt.target</code> in Firefox if in an <code>onmouseout</code> event, otherwise <code>evt.relatedTarget</code></li> <li>Getting the element the mouse cursor moved to: <code>evt.toElement</code> in IE is <code>evt.relatedTarget</code> in Firefox if in an <code>onmouseout</code> event, otherwise <code>evt.target</code></li> <li>Note: <code>evt.currentTarget</code> (the element to which the event was bound) has no equivalent in IE.</li> </ul></li> </ul>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POWhat are the typical reasons Javascript developed on Firefox fails on IE?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. UScryo
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POWhat are the typical reasons Javascript developed on Firefox fails on IE?
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. COVery, very, very nice list! Thanks to everyone who contributed :)
 singulars
 PostPostId
 PO
 UserUserId
 UScwap
2. COthanks great answer
 singulars
 PostPostId
 PO
 UserUserId
 UStito11

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.