Question

我尝试用简单的图片和链接菜单替换在flash上创建的网站菜单。我是用CSS做的。背景图片插入CSS值：background: url(/image.png)，菜单只是<a>标签的列表（使用CSS样式将其显示为白色且没有下划线等等）。它适用于谷歌浏览器和IE浏览器，看起来像这样：

correct menu

这是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，macari上的safari）第一次显示菜单不正确，如下所示：

incorrect menu

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

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

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

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

Answer 1

给a标签显示块

display: block;

让它在moz上工作你总是可以使用它（尽管不要这样）。所有在这些花括号内发生的东西都只会在mozilla中呈现。

@-moz-document url-prefix() {

}

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

1 个答案: