在页面上显示错误的 html，不会影响页面的其余部分
我的网站上有一些详细内容页面，我无法完全控制某个 div 中显示的 html 内容。现在，当外部资源的内容包含无效的 html 时，就像没有结束一样，我在右栏中的导航也是斜体的。我不想使用 iframe，例如 eBay，并且可能还有其他方法可以解决此问题。希望得到答复。
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
上面是我的页面的简化结构。
I have got some detail content pages on my site where I don't have the complete control over the html content that is displayed in a certain div. Now when the content of the external resource contains invalid html, like having no ending my navigation in the right-bar is also italic. I don't want to use iframes, like ebay, and there is probably other ways to fix this. Hope on an answer.
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
A simplified structure of my page is above.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我讨厌告诉人们在不必要的时候使用表格，但在这种情况下，我觉得它可以解决你的问题。
您面临的问题是浏览器格式良好的 html 检查之一，因此，您可能有一些浏览器按您希望的方式工作，而另一些浏览器的工作方式则让您烦恼，因为每个渲染引擎都会执行自己的操作格式良好的 html 检查风味。
如果你将它包裹在 td 中，那么我认为它不会像你所看到的那样出血样式。只是一个想法。 td 容器比您当前使用的 div 容器更有帮助的原因如下：由于您将它们的内容包装在 div 中，并且它们很可能将自己的内容包装在 div 中，因此浏览器不会不知道错误在哪里。它不知道缺失的 div 标签应该插入到哪里。因此本质上， div in div in div 会给格式良好的 html 检查带来问题，因为它不确定您忘记了哪个标签。不过div in div in td，那就更明显了。如果 td 打开并关闭，则它知道丢失的标签属于较小的可能元素组。换句话说，通过将格式正确的检查包装在不同的标签类型中，您可以更轻松地完成其工作。
这对我来说很有意义。我希望我已经解释清楚了。
I hate to tell people to use Tables when they aren't necessary, but in this case, I feel that it could solve your problem.
The issue that you are facing is one of the browsers well-formed html check, so, you could have some browsers that work as you hope, and others that work the way that bothers you, as each rendering engine is going to perform it's own well-formed html check flavor.
If you wrap it inside a td, then I don't think that it will be able to bleed styling the way that you are seeing. Just a thought. The reason that a td container is going to help more than the div container that you are currently using is the following: Since you are wrapping their stuff in a div, and they are most likely wrapping their own stuff in divs, the browser doesn't know where the mistake is at. It doesn't know where the missing div tag should be inserted. So essentially, div in div in div creates problems for the well-formed html check, as it is not sure which of the tag you forgot. However, div in div in td, that is more distinct. If the td open and closes, then it knows that the missing tags belong to a smaller group of possible elements. In other words, you are making it easier on the well-formed check to do it's job by wrapping it inside different tag types.
This makes sense to me. I hope that I have explained it ok.
我认为除了使用 iframe 之外没有其他办法。如果您不使用 iframe 来托管外部内容，则意味着外部内容将包含在您页面的 DOM 结构中，因此除非您解析所有外部内容代码以检查所有可能影响您页面的内容（这可能是疯狂的），您永远无法确定您的页面不会受到来自外部代码的附带影响。
即使使用 iframe，您也应该解析外部内容以查找脚本标记，以防止任何不需要的 javascript 代码在您的页面内执行。
I think that there is no other way than using iframes. If you don't use an iframe to host the external content means that the external content will be included in the DOM structure of your page, so unless you parse all the external content code to check all the possible things that should affect your page (and this could be a madness), you will never be sure that your page will be safe from collateral effects coming from the external code.
And even using iframes, you should parse anyway the external content to look for script tags, to prevent any undesired javascript code been executing inside your page.