logo标签列表

如何在内联样式中转义引号？

htmlcssxmlescapingmarkup
25

如果我有一个内联样式表，而且因为某种奇怪的原因我想在CSS中使用与HTML代码中封装属性值所使用的相同引号，则可以吗？

以下哪个是正确的呢？

<div style="background: url(\"http://my-url.com/img.jpg\")"></div>


<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)"></div>

我认为第一个是正确的，第二个是无意义的。我对吗，为什么？

编辑：

一位同事写成了第二种方式，问题在于一些浏览器（包括但不限于Internet Explorer 6+7+8）请求包含“"”符号的url，这导致了 404 请求。

编辑2：

现在情况真的变得很奇怪了。这是我们文件中复制粘贴的原始代码。

<div class="cover" style="background-image: url(&quot;http://www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F7780E.jpg&quot;);">

这是我们错误日志中的原始记录：

13:09:45 (0.2424) [header] requ_uri        /schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"
Mar 18 13:09:45 (0.0001) [header] server_addr     10.48.195.172
Mar 18 13:09:45 (0.0001) [header] http_user_agent Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; eSobiSubscriber 2.0.4.16; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; AskTbFF/5.9.1.14019)
Mar 18 13:09:45 (0.0001) [error] 404-Seite wurde aufgerufen
Mar 18 13:09:45 (0.0386) [header] remote_ip       212.95.7.69 - AT
Mar 18 13:09:45 (0.0001) [header] visitor_id      4095543, -
Mar 18 13:09:45 (0.0001) [header] requ_url        http://www.flimmit.com/schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"
Mar 18 13:09:45 (0.0001) [header] http_referer    http://www.flimmit.com/schauspieler/Kelly+Trump/
Mar 18 13:09:45 (0.0000) [header] finished at 0.2816

这是一个IE8客户端。在IE6中，请求URI甚至会在其中使用 &quot; 而不是 "。

所以要么我们都错了，要么Internet Explorer没有遵守任何标准？

在HTML中使用两种引号的原因是有其道理的。你的奇怪原因只是在SO上问一个奇怪的问题吗？ - Oded
4
@Oded 这是一个奇怪的评论。 - Shaz
@Shaz - 这是一个奇怪的要求。我在想这个问题是否是人为制造的。 - Oded
我真的不明白你在这里想要实现什么？ - user557419
没什么，这只是我同事生成的一个 CSS，我们对此进行了争论，这个问题没有得到明确的答案 :D - The Surrican
从所有的答案来看，第二种方式是正确的，但是Internet Explorer无法正确解释它...这是谁的错？ - The Surrican
4个回答
30

使用单引号，我认为应该使用圆括号：

<div style="background: url('http://my-url.com/img.jpg')"></div>

这个&quot;也可以使用（在jsFiddle上测试过）：

<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)">test</div>
他说他特别想使用相同的引号。 - Oded
抱歉，括号是我的错误。但奇怪的是，Internet Explorer 请求包括引号的 URL，这导致我们服务器上出现404错误... - The Surrican
@Luke Duddridge 我已经在答案中添加了原始代码和错误信息。不幸的是，我无法测试它，因为我身边没有任何Windows系统... - The Surrican
@Joe，就像有些人说的那样，引号并不总是必要的，您在没有它们的情况下是否会遇到相同的问题？ - Luke Duddridge
不，这解决了问题。我们现在有单引号了。更改也没有问题。我只是想知道为什么一开始会出现问题，因为这都是标准和符合规范的... - The Surrican
@joe：刚看了你添加的错误信息。对我来说，它看起来像是在前面添加了一些其他的位，所以URL是：/schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"。看起来URL字符串构建不正确。（同时，在http:后面只显示1个正斜杠，不确定这是否是编码错误） - Luke Duddridge
5

就转义而言，第二个选项是正确的：

<div style="background: url(&quot;https://my-url.com/img.jpg&quot;)"></div>

在 HTML 中，如果要使用双引号，可以使用 &quot;，无论是在属性中还是其他地方。

请参见此 jsfiddle（摘自this SO 答案）。

转义特殊字符为实体始终是上策。它们在 HTML/XML 文档中得到扩展，并被指定为语法上有意义字符的解决方法。否则，您最终只会用完引号嵌套的类型。 - zneak
@Luke Duddridge因为这个问题是关于&quot;而不是{}的。在我看来，这个遗漏似乎是一个小的、可修复的遗漏。 - zneak
@zneak - 可能是，也可能不是。我宁愿不做假设。 - Oded
奇怪的是，Internet Explorer 请求包括引号在内的 URL，这导致我们的服务器返回 404 错误。 - The Surrican
@Joe - 如果你不想传递引号，请不要对它们进行编码... 使用单引号来分隔URL（或者根本不用，因为它们不需要）。 - Oded
5

首先，为什么要这样做？

你应该使用()而不是{}

这种方式是最好的：

<div style="background: url('http://my-url.com/img.jpg')"></div>

这种方式是可以的：

<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)"></div>

这也可以工作：

<div style="background: url(http://my-url.com/img.jpg)"></div>

这个不起作用：

<div style="background: url(\"http://my-url.com/img.jpg\")"></div>

注意：在url后面删除空格。
为什么要删除 url 后面的空格？否则会出现问题吗？ - zneak
抱歉，括号是我的错误。但奇怪的是，Internet Explorer请求的URL包含"，这导致我们服务器上出现404错误... - The Surrican
@joe，嗯，我只在Firefox中尝试过。你知道你根本不需要在URL中使用引号。请参见上面-我添加了一个新示例。 - RDL
@Joe，你是不是漏了一个分号';'。在IE7/8中它对我来说似乎工作正常。 - RDL
@Joe，在你的情况下，是否可以去掉引号？ - RDL
2

如果你想使用多个双引号和单引号

你可以将双引号和单引号组合在一起（嵌套）

style="background-image: url( 'image.jpg' );"

或者

style='background-image: url( "image.jpg" );'

并且可以更深层嵌套

例如（如果您正在使用框架模板（Django））

 style="background-image: url( ' {% static "image.jpg"   %}' ); "
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接