html5shiv
html5shiv copied to clipboard
aFarkas
Presence of xmlns attribute causes HTML5Shiv to Fail in IE8
Presence of the xmlns attribute causes the HTML5Shiv to fail.
Example instance: In the
Issue only appeared in Internet Explorer 8 but fine in IE6 and IE7. Didn't test in other non-HTML5 supported browsers.
Found a similar bug report in stack overflow here: http://stackoverflow.com/questions/12619875/html5-block-level-elements-failing-in-ie-with-html5shiv-or-modernizr
The SO question seems different, as the Operator stated
one of the nav elements had an odd attribute xmlns="http://www.w3.org/1999/html" assigned to it causing the error.
Putting xmlns attributes on HTML5 elements aside of root and assuming that they'll work as intended doesn't look like a great idea. But this haven't caused your issue, right?
Unfortunaley, I can't really replicate this issue using standard conform markup. This is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<title></title>
<style>
section {
margin: 10px;
padding: 10px;
border: 3px solid #000;
}
svg section,
section section {
border-color: red;
}
</style>
<script src="../src/html5shiv-printshiv.js"></script>
</head>
<body>
<section>
test
</section>
<section>
test
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</section>
<section>test</section>
<script>
if(document.querySelectorAll){
var section = document.querySelectorAll('section');
for(var i = 0; i < section.length; i++){
console.log(section[i].parentNode)
}
}
</script>
</body>
</html>
The only way I can replicate that something is going wrong is by using a) a namespace (polyglot HTML5) and b) do not explicitly close the rect element.
I had the same issue and it was the xmlns attribute in an inline SVG file (in the
