Question

我有：

<img class="avatar_img" />

之后：

avatar_img.attr({src: "/site_media/avatars/" + this.userid + ".jpg", title: this.username});

我明白了：

<img title="admin" src="/site_media/avatars/1.jpg" class="avatar_img">

如您所见，标签末尾的斜杠“/”已消失。我该如何解决？它似乎在渲染我的网站时遇到了一些问题...

Doctype和其他人......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Answer 1

查看生成的源时，它不一定遵循XHTML标准。浏览器在运行时读取DOM的方式与您在XHTML代码中看到的方式不同。这实际上如何影响您网站的呈现？它不应该有所作为。

Answer 2

好笑，我只是昨天解决了这个问题！

问题在于，即使您指定了XHTML doctype，如果Content-Type标头设置正确，DOM（至少在FireFox中）也只会遵循XHTML规则，例如application/xhtml+xml。这包括使用JavaScript操作DOM，包括jQuery。作为实验，请考虑以下代码：

var foo = $('<div></div>');
foo.html('<img src="#" />');
console.debug(foo.html());

根据Content-Type的设置，此代码会有不同的结果。如果内容类型为text/html，您将返回<img src="#">，因为使用普通HTML，这是正确的。但是，如果Content-Type为application/xhtml+xml或XHTML的任何其他可接受的MIME内容类型，则应返回<img src="#" />。

因此，无论您使用哪种服务器端框架，都需要将该标头添加到响应中。如果它是静态文件，您应该能够使用元标记：

<meta http-equiv="Content-Type" content="application/xhtml+xml" />

您可以使用FireBug中的NET标签检查页面加载的标题。

我在ASP.NET MVC中遇到了额外的问题，即使我专门设置它，它也不会设置内容类型。诀窍是你需要在调用之后将其设置为。所以，这应该有效：

public void ActionResult Index() { var result = this.View(); this.Response.ContentType = "application/xhtml+xml"; return result; }

编辑：我刚刚看到您的修改，并且您使用元标记设置了错误的Content-Type。有关详细信息，请参阅我的其余部分。

Answer 3

取决于浏览器生成的内容。 Internet Explorer将主要生成它喜欢的任何内容，通常是大写的未封闭图像标记。这通常是直接检查DOM的样子，即使它可能正确呈现。

Firefox更有可能按照它所说的去做。但是，在两种浏览器中，如果您的页面中某处有无效的XHTML，您可能会将渲染引擎抛入Quirks模式 - 在这种情况下，它会尽力以旧式浏览器的方式呈现页面，能够处理几乎任何你给它的标记，并至少向用户呈现一些东西。副作用是你可以忽略你在符合标准的优雅方面的努力，并且渲染不会像你期望的那样出现。

所以我先看一下页面的其余部分，确保它完全符合XHTML标准，然后JQuery和DOM应该很好地配合。

Jquery从<img/>标记中删除'/'？

3 个答案: