Why is IE9 displaying my HTML5 block level elements as inline?
Isn't HTML5 is supposed to work in IE9? It’s not working as expected for me.
Here is my HTML5 code:
<!DOCTYPE html>
<html>
<head><title>
Dripel - Welcome
</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>Welcome to Dripel</header>
<section id="main">
I am under development. Please check back later.
</section>
<footer>
</footer>
</body>
</html>
You can view it at http://www.dripel.com/.
In IE 9, the <header> a开发者_如何转开发nd <section> elements are being displayed as inline. Note that I am not using any CSS at this time.
Any idea what’s going on?
According to Dive into HTML5, the final version of Internet Explorer 9 won’t have this problem.
So I reckon you’re seeing this because IE9 is still in beta. You’re right, you shouldn’t see this when it’s released.
It’s probably worth including the explicit display: block for HTML5 elements anyway. You (usually) never know when someone’s going to look at your code in a pre-HTML5 browser.
This is true for other browsers too, not just IE. The same behavior can also be observed for Firefox 3.6.
Since HTML5 is only a working draft, the browser vendors have not yet created a default stylesheet for these elements, so by default elements are displayed inline.
Use a reset stylesheet that gives these elements display: block if you want to use them, like:
article, aside, footer, header, hgroup, nav, section {
display: block;
}
Copied from Chrome's User Agent CSS :)
If you want more info, well then - read the beta release notes on HTML5. Nowhere does it explicitly state that IE9 "support" those HTML5 element. Your concept of support is also ill-defined here - what do you mean support? A UA stylesheet like the one above? Support for generic unspecified elements? (A feature which IE9 have, so you don't need a small script to create the elements prior to using them.)
The HTML5 specs only talks about the semantics of each of these elements, and nothing on how browsers should display them. So do you expect a browser that "support" HTML5 do?
IE 9 supports some of HTML5. So do all of the other browsers. HTML5 is not yet finished, and IE 9 is not yet finished, and no browsers supports all of HTML5. For instance, no browsers that I know of support <style scoped> or <iframe seamless> yet.
I wouldn't expect any browser to support all of HTML5 in one release. HTML5 has a lot of new functionality, and it is still in a state of flux. Browsers are implementing features one at a time, sometimes with prefixes to avoid incompatibility later, sometimes in beta or development versions so that the design can be tested out before a wider release. It's not possible to write a perfect spec all in one go, and then have everyone implement it all in one go; instead, features are implemented experimentally, the spec is written around them, things are fixed, the spec is updated, and so on, until everyone is happy that it's all pretty good and is implemented in compatible ways between different browsers. It will be quite a while yet before all of that happens for all of HTML5.
加载中,请稍侯......
精彩评论