I have a structure which is as follows:
<a href="#">
<footer>
<p>Some text</p>
<h2>A Heading</h2>
</footer>
</a>
This works and displays as expected in all browsers (even IE6 with the HTML5shiv.js) except Firefox 3.6. In Firefox 3.6 the display is completely screwed and if you use Firebug to inspect the DOM, the <footer>
element is empty and the elements which should be inside it are outside of it.
All the tags are closed correctly. The <a>
is set to display:block
in the CSS.
The W3C validator validates the document and does not mark this structure as incorrect.
The spec states that an <a>
element may be classed as flow content when it contains other flow content. The <footer>
is flow content开发者_开发知识库.
Is it just that Firefox 3.6 doesn't render HTML entirely correctly?
Any ideas for a fix?
Ta!
According the W3C HTML5 Reference the Footer Elements content model is:
Flow content, but with no heading content descendants, no sectioning content descendants, and no footer element descendants.
Which an a
element is interactive content.(Which also can be a Flow Content)
So using the a
element will validate, if you validate it against HTML5 Standards. Using something like the W3C validator.
So to answer your question, FireFox 3.6 Doesn't conform to HTML5 standards completely. FireFox 4.0 conforms better than 3.6. You can find a list of what elements of HTML5 (and CSS3) are supported by legacy browsers here.
As for the fix I would suggest that you hide the footer from Firefox, and show a div
with your content in that is hidden for everything but firefox. I would accomplish this using jQuery CSS Browser Detection using jQuery instead of Hacks is a good place to start.
Firefox 3.6 doesn't implement the HTML5 parsing algorithm; it has an HTML4 "parser", basically.
I think your workaround options are:
- Avoid "block level" HTML tags inside the footer.
- Put a
<span>
as a child of<a>
wrapping the<footer>
. - Put a
<div>
as a child of<a>
wrapping the<footer>
.
精彩评论