CSS 和图像不会在页面加载时加载，但会在页面刷新时加载
所有，
我有一个具有以下结构的 PHP MVC 应用程序：
helloworld
- application
- configs
- controllers
- models
- layouts
- include
- library
- public
- .htaccess
- index.php
- design
- css
- style.css
- struct.css
- js
- images
- bg.gif
我在 apache 中配置了一个名为 hello 的虚拟主机，它指向 helloworld/public/ 文件夹。因此，当我使用 http://hello 查看我的网站时，所有 CSS 和图像都呈现良好。
我将我的网站部署到具有与上述类似配置的不同服务器。当我使用 http://test.com/hello 访问网站时，CSS 和其中包含的背景图像在 Chrome 和 Safari 中渲染得非常好，但背景图像在 IE、Firefox 和 Opera 上渲染失败。当页面在这些浏览器上刷新时，它工作得很好。我无法理解这种行为。
我的 CSS 中的 URL 是这样写的：
background-image: url(/design/images/bg.gif);
我的 htaccess 是这样的：
Options -MultiViews -Indexes
#####################################################
# CONFIGURE media caching
#
Header unset ETag
FileETag None
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "max-age=7200, must-revalidate"
SetOutputFilter DEFLATE
#
#####################################################
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
有人可以解释为什么背景图像和 CSS 在页面加载时无法正确呈现，但在页面刷新后呈现吗？
All,
I have a PHP MVC application with the following structure:
helloworld
- application
- configs
- controllers
- models
- layouts
- include
- library
- public
- .htaccess
- index.php
- design
- css
- style.css
- struct.css
- js
- images
- bg.gif
I have configured a virtual host in apache called hello that points to helloworld/public/ folder. So, when I view my site, using http://hello all the CSS and images render fine.
I deployed my site to a different server with similar config as above. When I access the website using http://test.com/hello the CSS and the background images contained in it, renders absolutely fine in Chrome and Safari, but background images fail on IE,Firefox and Opera. When the page refreshes on these browsers, it works just fine. I am unable to understand the behavior for this.
The URLs in my CSS are written like this:
background-image: url(/design/images/bg.gif);
and my htaccess is like this:
Options -MultiViews -Indexes
#####################################################
# CONFIGURE media caching
#
Header unset ETag
FileETag None
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "max-age=7200, must-revalidate"
SetOutputFilter DEFLATE
#
#####################################################
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
Can somebody explain why Background images and CSS is not rendering properly on page load, but renders after a page refresh?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
让我们做一些测试来识别问题
1- 尝试访问 http://test.com/ hello/design/images/bg.gif，它应该是可访问的，如果不是，那么它的权限问题
2-然后尝试在你的css文件中使用绝对url，如
background-image: url(http:// /test.com/hello/design/images/bg.gif);3-如果您仍然遇到问题，那么它是设计问题，我猜您正在使用 IE 6 查看此处
let do some testing to identify the problem
1- try to access http://test.com/hello/design/images/bg.gif ,it should be accessible , if not then its permission problem
2- then try to use absolute url in your css files like
background-image: url(http://test.com/hello/design/images/bg.gif);3- if you still face the problem then its design issue , i guess you are using IE 6 check out here
尝试取消注释 .htaccess 上的 deflate 选项，也许您的服务器没有激活 mod_deflate。
Try to uncomment deflate option on your .htaccess, perhaps your server don't have mod_deflate activated.