什么是HTML5标签的替代品 <figure> 和 <section> 在jQuery中使用较旧的浏览器？

Question

Can you suggest an HTML5

<figure>
    <img src="path/to/image" alt="About image">
    <figcaption>
        <p>This is an image of something interesting.</p>
    </figcaption>
</figure>

and

<section>
    <!-- Content here -->
</section>

tag alternative for older browsers in jQuery?

I searched a lot but I found stuffs about the <canvas> tag everywhere.

I will be glad to see your answers, thanks in advance.

Answer 1

What's jQuery got to do with it? Are you having problems accessing or manipulating HTML5 elements in jQuery?

As far as the HTML goes, the new HTML5 tags you've mentioned are all block-level elements that can contain other block-level elements, so the equivalent in HTML4 is <div> :

<div class="figure">
    <img src="path/to/image" alt="About image" />
    <div class="figcaption">
        <p>This is an image of something interesting.</p>
    </div>
</div>

and

<div class="section">
    <!-- Content here -->
</div>

The HTML5 tags should work fine in older browsers and with jQuery, with two exceptions:

1. Internet Explorer, until version 9, did not support the new tags, as it didn't support any unknown tags. (Their content would be displayed, but the tag itself would not appear in IE's DOM representation of the page.) However, you can make older IEs recognise unknown tags by creating them in JavaScript: see http://remysharp.com/2009/01/07/html5-enabling-script/

2. Browsers other than Internet Explorer treat unknown tags as inline, rather than block. Thus you'll need to assign display: block; to the block-level HTML5 elements in your stylesheet. Reset stylesheets like Eric Meyer's often do this.

But if you are having any other problems with them, do ask about the problems on Stack Overflow.

Answer 2

There's nothing wrong with using these elements even in older browsers. The only browser that might give you any trouble, is (obviously) IE, which will not allow styling for any new elements, but there's an easy JavaScript workaround:

document.createElement("section");
document.createElement("figure");

And so on...

Other then that, you can absolutely use the new elements easily.

Answer 3

我建议您使用Modernizr插件