We Keep Coding

Detecting any and all versions of Internet Explorer

There used to be a nice way to tell if a web browser is IE or not, by using this technique in HTML:
<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->
or
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
but this doesn't work anymore in IE 10.
Any idea what to use instead to tell IE from other web browsers (using HTML or JavaScript)?
PS. I need to be able to tell ANY version of IE from non-IE web browser.

I appreciate all your insight, but none of it answers my actual question. Again, I am not asking about the feature detection. All I need to know is if the web browser is IE or not. The following uses JavaScript and seems to work for all current versions of IE (including IE10):
<![if IE]>
<script type='text/javascript'>
if(/*#cc_on!#*/false)
var bIsIE = 1;
</script>
<![endif]>
and then to check if it's IE, do this from JavaScript:
if (typeof (bIsIE) != 'undefined')
{
//The web browser is IE
}
else
{
//The web browser is not IE
}
Obviously the code above assumes that the web browser has JavaScript enabled. But in my case the browser detection is relevant only if it has scripts enabled.

Every version of Internet Explorer is different from the others, just as every version of Chrome, Firefox, and Opera are different from their predecessors. You don't target vendors such as "Microsoft", "Google", or "Mozilla" when you develop websites—you target features.
Rather than asking "I'd like to use ::after, is this browser a Microsoft browser?" You should instead ask "Does this browser support pseudo-elements on the :: prefix?" This is feature-detection, and it's nearly always perfectly on target. Rather than guessing what a browser is capable of by its vendor, you determine what it's capable of by what it can actually do.
This may not be the answer you were looking for, but it's the correct answer nonetheless. If you're asking how to identify all Microsoft browsers, you are approaching the problem (or what you perceive to be a problem) incorrectly.
For proper solutions, I would encourage you to use tools like jQuery and Modernizr. These will handle API normalization, shimming of newer elements in older browsers, as well as feature-detection. This is the correct way to do things, and had developers been taking this approach from the beginning you may not have such a distaste for Internet Explorer today.

The link you give in your question - doesn't work anymore - which is to Windows Internet Explorer Engineering Team Blog leads to the following statement
Conditional Comments
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
This means conditional comments can still be used, but will only
target older versions of IE. If you need to distinguish between more
recent browsers, use feature detection instead.
It seems to me that the IE team are strongly pushing for the use of feature detection rather than browser detection as the quote from the feature detection link above shows.
Same Markup: Core Guidelines
**DO**
Feature Detection
Test whether a browser supports a feature before using it.
Behavior Detection
Test for known issues before applying a workaround.
**DON'T**
Detect Specific Browsers
Also known as browser detection. Don't use the identity of a browser (e.g. navigator.userAgent) to alter page behavior.
Assume Unrelated Features
Don't perform feature detection for one feature, and then proceed to use a different feature.
So it appears that the Windows Internet Explorer Engineering Team are setting IE up so that you will not be able to use browser detection for IE10 and above.
EDIT
I do not use IE10 but does
navigator.appName=='Microsoft Internet Explorer';
work in IE10?

It isn't enough to just say IE10 is good enough and ignore the problem. It really depends on what you are trying to do. For most purposes feature detection would likely handle what you need. The far, far more complicated route is to start user agent detection by pulling in the user agent string from the HTTP request header. If you aren't careful with this you can go wrong pretty quickly.
To view your current user agent string in a browser JS console:
console.log(navigator.userAgent);
Here is a list of reported user agent strings across all kinds of browsers:
http://www.zytrax.com/tech/web/browser_ids.htm
Note that all MS Explorer agent strings will contain "MSIE," but first you have to weed out browsers like Opera that will also include the "MSIE" string in some cases.

This function returns true if the client browser is Internet Explorer, tested on versions 9-10-11.
function isIE(v) {
var ie;
ie = RegExp('msie' + (!isNaN(v)?('\\s'+v):''), 'i').test(navigator.userAgent);
if (!ie) { ie = !!navigator.userAgent.match(/Trident.*rv[ :]*11\./) }
return ie;
}
// Example
var ie = isIE();
var ie9 = isIE(9);
var ie10 = isIE(10);
NOTE: the function is incomplete and won't allow for isIE(11)

How to make JS and CSS compatible with IE, Firefox, Chrome, Safari?

Our company develops ERP and CRM, and so far our products support IE and Firefox. Now we want to support Chrome, Safari and even Opera. Is there any comprehensive materials that introduce browser compatibility of JS and CSS? thks!

theres the mozilla dev-center that has a great CSS- and JavaScript-reference. Every entry has information about browser compatibility.
For a quick overview, you cauld also take a look at caniuse.com (CSS and JavaScript) that provides simple tabular lists for the different features.

I've been coding the front-end for over a decade and a half now, and things seem to get better over time in regards to cross-browser compatibility. I've found that if I write and test my code using Firefox, most everything will work flawlessly on Chrome, Opera, Safari and the only thing you'll end up having to debug would be MSIE. 10 years ago I would have told you to code and test using MSIE and debug your code in the end with Netscape.
But yeah, if you follow this, you'll find it easier to make all your scripting and markup fully cross-browser compatible with no bugs at all. Enter IE9, of course, a different monster altogether.

Is there any comprehensive materials that introduce browser
compatibility of JS and CSS?
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
http://html5test.com/
http://caniuse.com/
"Comprehensive" can change overnight, but there is a great deal of information available.
If your products work for the latest version of Firefox, Chrome, Safari, and Opera will work without major flaws most of the time. If your markup is invalid, you are using many vendor-specific extensions, or you are using cutting-edge features, this may not be the case.

Which browsers support Microsoft JScript?

Which browsers support Microsoft JScript?

Only IE (and IE-based browsers like Maxthon) and, if you consider the windows desktop sidebar a browser, the windows desktop sidebar which uses IE internally. So don't use it unless the latter is your target environment.
Other browsers support JavaScript though which is what's used for active content on websites nowadays.

JScript is the name that Microsoft has chosen for its implementation of ECMAScript, Document Object Model and related APIs. Microsoft does not call it JavaScript, because Oracle holds the copyright on that name. Everyone else calls it JavaScript.
Only Internet Explorer and browsers based on it's rendering engine support true JScript (i.e. including it's omissions from, deviations from and additions to the standards).

JavaScript versions later than 1.5 - why?

The Mozilla Foundation continues to add new language features to JavaScript. They're up to version 1.8 now where 1.5 was more or less the ECMA baseline.
However, Firefox is the only browser that supports the latest version and IE is firmly stuck at a 1.5-equivalent JScript.
What purpose do the Firefox-only extensions serve? Or are they just lying dormant until (and if) the rest of the browsers catch up?

Firefox, Thunderbird, and other XUL apps also have large portions of themselves written in JavaScript. A more featureful JavaScript means a better development environment for Firefox and other Mozilla apps.

Extending the language is a good idea, even if only one browser is doing it - eventually it will prove itself and be made into the standard at which time other browsers will have to catch up.
Otherwise, how can progress be made - Microsoft does this all the time: would XMLHttpRequest have ever made it into the standards if Internet Explorer wouldn't have implemented it first?
From the Mozilla perspective the purpose of these changes, except for adding more capabilities for use by web developers, is to lead up to JavaScript 2.0, that is being developed as the next revision of ECMA 262 (revision 4) TC39 workgroup.
Future browsers will support JavaScript 2.0. In the mean time, developers are invited to take advantage of these extra features - natively in Firefox and using JavaScript libraries that provide backward compatibility with Internet Explorer. I find this very useful.
Also, it may be interesting to note that Webkit (the engine developed by KDE and used by Safari, Chrome and several free software browsers) supports JavaScript 1.7.

The biggest reason at the moment for improved JavaScript is for extension writers, who need not worry about cross-browser compatiblity.

JavaScript is a trademark by Sun which was licensed to Netscape and is now held by the Mozilla Foundation. Microsoft has their own implementation of the language called JScript, but there are others (eg. DMDScript).
ECMAScript was an afterthought to add a common baseline to the various implementations. So it's only natural that language development continues outside the standards committee, which is free to add the changes pioneered by the implementors in future revisions of the standard (eg the array extras introduces in JS1.6 will be in ES3.1).

If you take IE out of the picture what additional JavaScript functionality is available in the other browsers?

I'm just talking about JavaScript here, not CSS or implementation of the DOM.
I know getters and setters are now available in the latest release of all major browsers except IE. What other JavaScript features are available cross-browser if we have the latest versions of the other browsers and forget about IE for a minute?

With Gecko-engined browsers, you get:
https://developer.mozilla.org/en/New_in_JavaScript_1.6
https://developer.mozilla.org/en/New_in_JavaScript_1.7
https://developer.mozilla.org/en/New_in_JavaScript_1.8
In terms of other browsers implementing these features, I'm only aware of Webkit implementing Array Extras, but it's actually quite easy to monkeypatch support for those in all browsers since they're just additional methods.
Gecko, Opera and Webkit also support the canvas element, which although being a new HTML element, is used via JavaScript, so I'm not sure if that fits your criteria. Having said that, there are independent efforts underway to bring it to IE.

I would recommend you visit www.quirksmode.org for a lot of detailed comparisons of different browsers/versions.

XML APIs:
DOMParser object
XMLSerializer object
XSLTProcessor object
DOM XPath implementation
Although these are not "JavaScript functionality", rather DOM APIs