我正在通过W3C的验证器运行我的网站，试图使其通过XHTML 1.0 Strict进行验证，但我陷入了一个特别棘手的(至少以我的经验)验证错误。我在网站中包括来自各种服务的某些徽章，这些徽章提供了自己的API和代码以包含在外部网站中。这些徽章(大多数情况下)使用javascript填充我们在标记中插入的需要子元素的元素。这意味着最终会生成完全有效的标记，但是对于验证器而言，它所看到的只是一个不完整的父子标记，随后该标记会引发错误。

需要注意的是，我知道我可以对他们的徽章未通过验证的服务提出投诉。没有这个，我认为有人在验证代码的同时添加了这样的徽章，这就是我感兴趣的内容。诸如"向Flickr投诉他们的徽章"之类的答案不会对我有多大帮助。

另一个警告：我希望标记尽可能保持语义。 IE。添加空的li标签或者tr-td对以使其验证将是不希望的解决方案，即使可能有必要。如果那是验证的唯一方法，哦，好，但是请向语义标记倾斜答案。

举个例子：

<div id="twitter_div">
<h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

请注意包装JavaScript的ul标签。最终通过脚本将其填充为lis，但对于验证器，它只能看到未填充的ul。

提前致谢！

解决方案

也许我们可以使用javascript来编写初始徽标HTML？我们可能只希望将徽章代码插入到文档中(如果可以使用javascript来填充它)，对吗？

我们只需要确保在编写各种徽章的JavaScript之前先编写文档即可。

我们能否举一个特定的HTML /链接到带有无效代码的页面的示例？

在某个时候页面变为有效，对不对？这是唯一可以真正验证的时间。

我不确定如果使用大量DOM脚本构建的非平凡页面在其构建过程中的每一步都将保持有效。

这可能不是这个主题上最受欢迎的观点，但是...

不必担心100％验证。没什么大不了的。

验证的重点是使标记尽可能地标准。为什么？因为使用了不符合规范的标记(例如，未经验证的标记)的浏览器会执行自己的错误检查来更正它，并按照我们希望其显示给用户的方式显示页面。浏览器错误检查的质量各不相同，yadda-yadda-yadda，最好具有有效的标记...但是，导致验证失败的甚至不是代码！写这些徽章的人可能在多个浏览器中对它们进行了测试(当然，我们也应该做同样的事情)，如果它们能按预期工作，那么就不用管它了。

简而言之，验证没有奖品：)

以下片段是有效的XHTML并完成了该工作：

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter.com/stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

每个徽章的解决方案可能不同。在Twitter的情况下，我们可以编写自己的回调函数。以下是基于他们的徽章代码的示例：

<div id="twitter_div">
  <h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

我在<ul>标记中放置了一个带有" display：none"的<li>：

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

这不会打扰脚本，在这种情况下它可以工作，
而且我认为这不是一个"不良解决方案" :)