Status: Unconfirmed Owner: ---- Labels: Type-Bug Pri-2 OS-All Area-Misc New issue 27495 by Hanrui.Gao: Unclosed <div> inside <li>...</li> causes content invisible. http://code.google.com/p/chromium/issues/detail?id=27495
Chrome Version : 4.0.230.7 URLs (if applicable) : http://kankan.xunlei.com/4.0/movie_index.html Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari 4: Fail Firefox 3.x: OK IE 7: OK IE 8: OK What steps will reproduce the problem? 1. Load URL: http://kankan.xunlei.com/4.0/movie_index.html 2. Look at the page in the different kinds of browsers(IE, FF, Chrome, Safari), you will find that in Chrome and Safari there's a big empty area which is expected to have many poster thumbnails. What is the expected result? Chrome behaviours as well as IE and Firefox. What happens instead? A lot of contents are missing in Chrome. Please provide any additional information below. Attach a screenshot if possible. The page has following code in page source: HTML source code: ... <script src="http://js.kankan.xunlei.com/4.0/js/common.js";></script> ... <ul...> <li> ... <script>printScore({totalScore:'6.00',totalUsers:'1',top_level:'3',level1:{ score:'0',sers:'0'},level2:{score:'0', users:'0'},level3:{score:'0', users:'0'}, level4:{score:'0', users:'0'},level5:{score:'0', users:'0'}})</script> ... </li> </ul> ... JavaScript code("http://js.kankan.xunlei.com/4.0/js/common.js";): ... function printScore(score){ var p = getGradePercent(score); var str='<div id="grade" onmouseover="displaySocreTips(this)" onmouseout="hiddenScoreTips(this)"><ul><li><div style="width:'+p.level1+'%;"></div></li><li><div style="width:'+p.level2+'%;"></div></li><li><div style="width:'+p.level3+'%;"></div></li><li><div style="width:'+p.level4+'%;"></div></li><li><div style="width:'+p.level5+'%;"></div></li></ul><div><div class="pingfen"><p> 用户评价</p><ul><li><label>力荐</label><span><div style="width:'+p.level1+'%;"></div></span></li><li><label>推荐 </label><span><div style="width:'+p.level2+'%;"></div></span></li><li><label>一般 </label><span><div style="width:'+p.level3+'%;"></div></span></li><li><label>较差 </label><span><div style="width:'+p.level4+'%;"></div></span></li><li><label>很差 </label><span><div style="width:'+p.level5+'%;"></div></span></li></ul></div><div></div>'; document.write(str); } ... 1. In the HTML code, the <script> part is used to create "用户评价" HTML code. 2. The JavaScript function "printScore" is contained in JavaScript file "http://js.kankan.xunlei.com/4.0/js/common.js";. This method can write some HTML code into the page, in the code, the HTML code is not proper, there are 14 "<div..>" but just 12 "</div>". 3. IE6, IE7 and Firefox can parse the code as a proper format one. But Chrome and Safari can't parse it in a proper way, the code affect the HTML code after it. With Chrome Developer Tools, the DOM nodes after the first "<script>printScore(...</script>" don't exist, the webkit can't render them. 4. When change the last code "</div><div></div>" to "</div></div></div>", the problem disappear. 5. Different browsers may have their own ways to deal with such mistake caused issue. For example, unclosed <a> tag, <div> (or other block element except <p>) tag, and <span> (or other inline element expect <a>) tag will been rendered in different ways in each browser. Attachments: dhdswwcc_54csc3hx78_b.jpg 477 KB Unclosed tag testcases.7z 428 bytes -- You received this message because you are listed in the owner or CC fields of this issue, or because you starred this issue. You may adjust your issue notification preferences at: http://code.google.com/hosting/settings -- Automated mail from issue updates at http://crbug.com/ Subscription options: http://groups.google.com/group/chromium-bugs
