图片在IE能正常显示但是不能在Firefox中显示

问题描述

今天本来放假，喜欢加班的我刚到电脑旁一条QQ信息就过来了。某客户需要我更改网站中一个gif图片的显示效果。本来我想不是多大的事情，就先用firefox打开网站，结果就出现了如下情况：

然后打开firebug：

好吧，用IE试试看，结果没有一点问题，图片能正常显示。用IE自带的调试工具看看，

我心中开始疑惑都是同样的路径，咋就显示不出来？

------------------------------------------------------------------------------------------------------

思考过程

1、是不是编码不同造成的原因？我对编码方式的应用不是很了解，先验证其他可能性，最后再想办法验证编码方式的问题。

2、浏览器差异造成的？

那么就果断验证第2中可能性吧。

------------------------------------------------------------------------------------------------------

实践过程

我先在网上看了看网友的经验，最后我隐约感觉到是绝对路径和相对路径出现了问题。于是，在firebug中修改了图片的URL地址为相对地址。哈哈，图片果然显示出来了。

这个系统后台发布信息是使用百度编辑器来实现的。知道了问题的源头就在后台简单修改一下就搞定了。

------------------------------------------------------------------------------------------------------

项目经验

Firefox和IE对“..\”的路径解析是不同的(Demo下载)

知识补充

Unix使用斜杆/ 作为路径分隔符，而web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用 斜杆/ 作为分隔符。

Windows由于使用 斜杆/ 作为DOS命令提示符的参数标志了，为了不混淆，所以采用 反斜杠\ 作为路径分隔符。所以目前windows系统上的文件浏览器都是用 反斜杠\ 作为路径分隔符。随着发展，DOS系统已经被淘汰了，命令提示符也用的很少，斜杆和反斜杠在大多数情况下可以互换，没有影响。

知道这个背景后，可以总结一下结论：

（1）浏览器地址栏网址使用 斜杆/ ;

（2）windows文件浏览器上使用 反斜杠\ ;

（3）出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用 斜杆/ ;

<div style="background-image:url(/Image/Control/title.jpg); background-repeat:repeat-x; padding:10px 10px 10px 10px"></div>
// 如果url后面用反斜杠，就不会显示任何背景

（4）出现在普通字符串中的路径，如果代表的是windows文件路径，则使用 斜杆/ 和 反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用 斜杆/ ;

<img src=".\Image/Control/ding.jpg" /> // 本地文件路径，/ 和 \ 是等效的
<img src="./Image\Control\cai.jpg" />
<img src="http://hiphotos.baidu.com/yuhua522/pic/item/01a949c67e1023549c163df2.jpg" /> // 网络文件路径，一定要使用 斜杆/

下面总结相对路径和绝对路径：

"./"：代表目前所在的目录。

"../"：代表上一层目录。

以"/"开头：代表根目录。

------------------------------------------------------------------------------------------------------

思想总结

1、全心全意为人民，这样不仅服务了客户而且锻炼了自己。

2、善假于物。遇到一个问题，很大可能前人早已遇到并且解决。站在这些人的肩膀上去提升自己的能力。

3、有意义的事情要时常记录，点滴的积累引起巨大的变化。