Can you tell me what is supposed to happen for IE browsers?
<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
<head>
...
I can understand that non-IE browsers would only interpret:
<html class="no-js" lang="en" dir="ltr">
but the condition for greater than IE8 isn't making a lot of sense:
<!--[if lt IE 9]> ... <!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
Is this a hack? The notations for opening and closing comments don't match.
The extra !-- bits are there to make it a valid HTML comment so that validators don't complain about bogus comments. More on that here and here. What non-IE browsers really see are two regular HTML comments containing [if gt IE 8]><! and <![endif] respectively.
The conditional comments allow greater than IE8 to see that <html> tag. As you've correctly pointed out, non-IE browsers will also consume that same <html> tag — the !-- bits are what allow them to do so. I wouldn't call it a hack, but then again, conditional comments themselves might be a hack depending on whom you ask (I certainly don't think so).