CSS 样式表中引用图片地址在各浏览器中的差异

在日常的网页开发中，我们经常需要在页面中引入众多的样式文件，这些样式文件又往往会为页面设置许多背景图片，以丰富页面的视觉效果。在这个过程中，有一个细节可能会被忽视，那就是图片的referer来源处理。

通常，我们的样式和图片文件的组织结构如下：

user.qzone.qq/ - a.css | - background-image:url(b.jpg)

经过测试发现，不同的浏览器在处理图片的referer来源时，会存在差异性。在IE、Safari以及Opera等浏览器中，a.css样式中的b.jpg背景图片的样式referer来源会被设定为站点的主域名地址。也就是说，这些浏览器会将图片视为站点资源的一部分，从而按照站点的域名进行引用。

Firefox浏览器的处理方式却有所不同。在Firefox中，图片的referer来源会被更改为样式文件的路径。这意味着，在Firefox浏览器中访问页面时，图片被视为从样式文件中独立获取的，其来源路径与样式文件相同。这种差异在处理图片防盗链时尤其需要引起我们的注意。

这种浏览器之间的差异可能会导致一些意想不到的问题。例如，在进行防盗链处理时，如果仅针对主域名地址进行设置，可能会在某些浏览器中无法生效。我们需要格外小心，确保考虑到各种浏览器的差异，进行合理的防盗链设置。这也提醒我们在开发过程中，需要更加关注浏览器之间的差异，以确保网页在各种浏览器中的表现都能符合预期。

值得注意的是，我们的页面元素通过cambrian渲染完成：“body”部分由 cambrian.render('body') 生成。在这个过程中，对于图片和样式的处理也是非常重要的一环。希望我们在未来的开发中能够更加关注这些细节，提升网页的用户体验。