IE11不通过Web服务器显示带有对象标记的图像但在本地很好 [英] IE11 Not Displaying Image With Object Tag Through Web Server But Fine Locally
问题描述
问题：通过对象标记将图像设置作为数据查看时，Internet Explorer 11在通过Web服务器查看时不会显示它。以下是整个代码：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:200px; height:100px"><img src="../../square.svg"/></div>
<div style="width:200px; height:100px"><embed src="../../square.svg"></div>
<div style="width:200px; height:100px"><object data="../../square.svg" type="image/svg+xml">Nope</object></div>
</body>
</html>
对于Firefox 28 / Chrome 34，如果我转到该网址，则会显示所有3个方块文档或在本地打开文档。对于Internet Explorer 11，在本地查看时，所有正方形都将显示。通过Web服务器查看时，仅显示前两个方块。对于第三个我得到不。我确实尝试使用.png来查看它是否与.svg相关，但我得到了相同的结果。最后，Firefox / Chrome的开发人员工具的网络选项卡显示GET返回svg类型，但IE开发人员工具显示它返回类型text / html并中止。它是Web服务器，还是我做错了什么？
For Firefox 28/Chrome 34, all 3 squares will show up if I go to the URL of that document OR open the document locally. For Internet Explorer 11, the squares will all appear when viewed locally. When viewing through the web server, only the first two squares will appear. For the third I get "Nope". I did try using a .png to see if it was .svg related, but I had the same results. Finally, the network tabs of the developer tools of Firefox/Chrome show the GET returning an "svg" type, but IE developer tools shows it returned type "text/html" and aborted. Is it the web server, or something I am doing wrong?
为了添加更多细节，我试图解决另一个问题时遇到了这个问题。所有这一切的最终目标是使用外部.svg图像来填充其容器（不保持其宽高比完好无损）。 Firefox似乎将.svgs视为<中的普通图像。 img>标签，我可以像平常一样拉伸它们。 Chrome似乎想要保持他们的宽高比，而IE则是一团糟。我希望将它们转换为<对象>我可以稍微强制.svgs，但我无法达到测试的目的。
To add a little more detail, I ran into this while trying to solve another problem. The end goal of all of this is to have external .svg images to fill their container (WITHOUT keeping their aspect ratio intact). Firefox seems to treat .svgs like normal images in the < img> tag and I can stretch them like normal. Chrome seems to want to keep their aspect ratio, and IE was a mess. I was hoping by converting them to < object> I could coerce the .svgs a little more, but I am not able to get to that point to test.
编辑：嗯，我不能找出问题，但我确实找到了解决我原定目标的方法。我用ajax请求拉动.svg图像，修改viewBox / preserveAspectRatio / width和height属性，然后将svg对象内联。在缓存方面，这是非常严重的，但是它确实适用于我计划支持的所有浏览器。
请求标题成功：
GET http://127.0.0.1/file/square.svg HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://127.0.0.1/file/xxx/xxx/index3.html
Accept-Language: en-US
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: 127.0.0.1
If-Modified-Since: Fri, 18 Apr 2014 03:31:10 GMT
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: vendor_session=xxx
回应成功：
HTTP/1.1 304 Not Modified
content-type: image/svg+xml; charset=UTF-8
last-modified: Fri, 18 Apr 2014 03:31:10 GMT
date: Sat, 19 Apr 2014 01:23:12 GMT
cache-control: private, must-revalidate, max-age=86400
expires: Thu, 01 Jan 1970 00:00:00 GMT
content-length: 0
server: Vendor Web Server/Version
请求失败：
HEAD http://127.0.0.1/file/square.svg HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: 127.0.0.1
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: vendor_session=xxx
回复失败：
HTTP/1.1 405 Method Not Allowed
content-type: text/html; charset=UTF-8
date: Sat, 19 Apr 2014 01:33:01 GMT
cache-control: private, must-revalidate
expires: Thu, 01 Jan 1970 00:00:00 GMT
content-length: 839
server: Vendor Web Server/Version
推荐答案
这里的问题是IE发出 HEAD 请求以确定目标资源的内容类型。您的服务器配置为拒绝HEAD请求（这是一个错误的配置），因此会导致HTTP错误而不是正确的响应。
The issue here is that IE issues a HEAD request to determine the content type of the target resource. Your server is configured to reject HEAD requests (which is a bad configuration) and thus it results in a HTTP error instead of the proper response.
您可能能够通过这样更改您的标记来避免此请求：
You may be able to avoid this request by changing your tag thusly:
<object data="../../square.svg" classid="clsid:30590066-98b5-11cf-bb82-00aa00bdce0b" type="image/svg+xml">Nope</object>
...但我可能只是重新配置服务器以禁止HEAD方法。
...but I'd probably just reconfigure the server to not forbid the HEAD method.
这篇关于IE11不通过Web服务器显示带有对象标记的图像但在本地很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
