【发布时间】：2012-01-29 05:22:53
【问题描述】：
我尝试用带有图像和链接的简单菜单替换在 Flash 上创建的站点菜单。我用CSS来做。背景图像插入 CSS 值：background: url(/image.png)，菜单只是<a> 标签的列表（使用 CSS 样式将其显示为白色，没有下划线等）。它在 google chrome 和 IE 上运行良好，看起来像这样：
这里是 header.php 代码（这是菜单块，它使用 php include_once 插入页面）：
<div id="menu_container">
<div id="menu_top_level">
<a href="ru/about">О компании</a>
<a href="ru/news">Новости</a>
<a href="ru/headhunter">Вакансии</a>
<a href="ru/contacts">Контакты</a>
</div>
<div id="menu_medium_level">
<a href="ru/tariffs">Тарифы</a>
<a href="ru/fleet">Автопарк</a>
<a href="ru/corporate">Корпоративным клиентам</a>
<a href="ru/techs">Технологии</a>
</div>
</div>
这里是 CSS 代码：
#header_main {color:white; width:100%; height:76px; background: #000 url(/common/images/menuimage2.png) no-repeat center top;}
#menu_container {width: 1000px; text-align: left; }
#menu_container a {color:white;}
#menu_top_level {font-size: 14px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 15px;}
#menu_top_level a {text-decoration: none; float:left; margin-right:20px;}
#menu_medium_level {font-weight:bold; font-size: 16px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 10px;}
#menu_medium_level a {float:left; margin-right:20px;}
CSS 通过<head> 标签中的链接连接：
<link rel="stylesheet" type="text/css" href="/common/css/style.css" />
使用 PHP 代码在页面上插入菜单块：
<div align="center">
<div id="header_main">
<?php include_once($_SERVER["DOCUMENT_ROOT"]."/common/tmp/header.php"); ?>
</div>
问题是某些浏览器（firefox，mac上的safari）第一次显示菜单不正确，像这样：
（<a> 标签和背景图像的 CSS 样式不起作用）。页面的所有其他部分都以 CSS 文件中的正确样式显示。
当用户更新页面时，它总是正确显示。
另外，我在其他机器上的 Firefox 上以及清除缓存时都无法收到此错误。
问题是，如何更改代码以确保它始终能在任何浏览器上正常工作？
【问题讨论】：
-
听起来这只是一个缓存问题。浏览器正在记住您的 CSS 文件的旧版本，但是在清除缓存或刷新浏览器时获得了最新版本......确保每次都提供最新文件的最佳方法（据我所知）是更改 CSS 文件的名称，并更改页面上的链接。
-
在 FF 9.0.1 (Ubuntu) 中没问题。
-
可能是缓存问题。只需清除缓存即可。此外，请尽早加载您的 CSS 文件（靠近页面顶部）。
-
你是对的，更改css文件名解决问题，谢谢
标签： html css browser multiple-browsers