{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《Will Internet Explorer's HTML Parser ever add》','https://www.manongdao.com/q-752314.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm doing some bug fixing for an error in IE8 and IE9 when I came across a strange error. There is a <section class="create"> tag in the HTML, but after the page loads, there is the exact same tag a little farther down the page. At first, I thought there was some bad javascript cloning the section somehow, but I disabled javascript, and it was still there after the page loaded. This has to be the HTML parser creating this tag then, right? The rendered HTML does not match the HTML file at all.
I know that HTML parsers will add in </div> tags or </html> tags, etc., when they are missing, but will IE ever reopen or add a tag for some reason? If so, what causes this? If this isn't the case, what could be causing a tag that doesn't exist in the HTML to be added to the DOM when javascript is disabled?
The HTML page I'm working on is over 20,000 lines long, and there's surely malformed HTML all over the place, any of which could be causing the DOM to be rendered improperly. If there's a snippet I could add to this question that would help, let me know in the comments.
Here is the minimal HTML that replicates this problem. Note that it only happens within a form tag, and not a div tag. The section tag reopens itself in IE8 and IE9 after the form element is closed, therefore creating 2 section elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<section class="create">
CREATE SECTION
</form>
</body>
</html>
And here's a fiddle: http://jsfiddle.net/VurE6/
For the record, IE10, Chrome, Firefox, and Safari aren't displaying this behavior (that I know of).
To an extent, all browsers do this sort of thing. For example, try this
in any browser and you should see two i elements created both with the "create" class.
The rules about when this happens are quite complex, but it happens when close tags don't end the effect of their element's descendants. In IE9, the form end tag is not closing the section, so to keep the section going, the browser has to create a second section element.
While this makes a certain sense in the case of the b and i elements, it makes no sense for section, and so it won't happen in any browser that implements the HTML5 parsing algorithm like IE10 and modern Firefox and Chrome, but does, apparently, in IE9.
See http://www.w3.org/html/wg/drafts/html/master/syntax.html#misnested-tags:-b-i-/b-/i for how HTML5 deals with the misnested b and i tags issue.