IE8 won't style figcaption element using JQuery and html5shiv
I have a JQuery script that manipulates the DOM to create a <figure> and <figcaption>. Unfortunately I don't seem to be able to style the <figcaption> using CSS, in IE8. The same code works fine for Chrome and Firefox. Any ideas why IE8 won't style the elements?
I'm using the HTML5Shiv script with IE8, so it should recognize the new HTML5 elements and allow me to style them. Here is the code, and thanks for checking it out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<title>Untitled</title>
<style>
body {
width:开发者_运维问答 600px;
margin-left: auto;
margin-right: auto;
}
figure {
float: left;
}
figcaption {
display: block;
text-align: center;
font-size: 0.5em;
font-style: italic;
font-weight: bold;
padding: 5px 0;
}
</style>
</head>
<body>
<img src="http://placehold.it/350x150" alt="This should be bold, italic, centered and small" />
<p>This is a regular paragraph.</p>
<script>
$(document).ready(function() {
$('img').wrap('<figure></figure>');
$('img').after('<figcaption>This should be bold, italic, centered and small</figcaption>');
});
</script>
</body>
</html>
You need the HTML5 innerShiv to style dynamic HTML5 elements.
I think it's because the shiv js has to process all the elements before the CSS is applied (note it doesn't work if you place the shiv js below the CSS)
therefore when you add the elements after the document has loaded the shiv js does not rerun to reprocess them (sorry about my terminology!)
it works fine if you change figure and figcaption to divs with classes and add the same classes to figure and figcaption in the CSS, but you probably already knew that.. just in case..e.g.
$(document).ready(function() {
$('img').wrap('<div class="figure"></div>');
$('img').after('<div class="figcaption">This should be bold, italic, centered and small</div>');
});
figure, .figure {
float: left;
}
figcaption, .figcaption {
display: block;
text-align: center;
font-size: 0.5em;
font-style: italic;
font-weight: bold;
padding: 5px 0;
}
you could if you want to be pure only feed the div version to IE , the page will still "validate" html5, or could you add the empty elements to the page at the same time as the image, then fill them via jQuery?
加载中,请稍侯......
精彩评论