首次使用 CSS 构建的站点块在 Firefox 和 Safari 中显示不正确

Question

我尝试用带有图像和链接的简单菜单替换在 Flash 上创建的站点菜单。我用 CSS 来做。背景图片插入 CSS 值：background: url(/image.png)，菜单只是 标签列表（使用 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 连接 标记中的链接：

<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>

问题是某些浏览器（mac 上的 firefox、safari）第一次显示菜单不正确，如下所示：

（< 的 CSS 样式;a> 标签和背景图像不起作用）。页面的所有其他部分均以 CSS 文件中的正确样式显示。

当用户更新页面时，它总是正确显示。

另外，我在其他机器上的 Firefox 上以及清除缓存时也无法收到此错误。

问题是，如何更改代码以确保它始终能够在任何浏览器上正常工作？

Answer 1

给 a 标签一个 block 的显示

display: block;

，让它在 moz 上工作，你总是可以使用这个（但尽量不要这样做）。这些大括号内发生的所有内容只会在 mozilla 中呈现。

@-moz-document url-prefix() {

}