0

我尝试用带有图像和链接的简单菜单替换在 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 上以及清除缓存时都无法收到此错误。

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

4

1 回答 1

0

给 a 标签显示块

display: block;

为了让它在 moz 上工作，你总是可以使用这个（尽量不要）。在这些大括号内发生的所有事情都只会在 Mozilla 中呈现。

@-moz-document url-prefix() {

}
于 2012-01-28T21:14:25.543 回答