0

フラッシュで作成したサイトメニューを、画像とリンクのあるシンプルなメニューに置き換えようとしています。私はCSSでそれを行います。背景画像はCSS値：background: url(/image.png)で挿入され、メニューは単なる<a>タグのリストです（CSSスタイルで白く表示し、下線なしなど）。それはグーグルクロームと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）が初めてメニューを正しく表示しないことです。

間違ったメニュー

（タグと背景画像のCSSスタイル<a>は機能しませんでした）。ページの他のすべての部分は、CSSファイルから正しいスタイルで表示されます。

ユーザーがページを更新すると、常に正しく表示されます。

また、他のマシンのFirefoxやキャッシュをクリアすると、このエラーが発生しません。

問題は、どのブラウザでも常に正しく機能するようにコードを変更する方法です。

4

1 に答える 1

0

タグにブロックの表示を与える

display: block;

mozで動作させるには、常にこれを使用できます（ただし、使用しないようにしてください）。これらの中括弧内で発生するすべてのものは、Mozillaでのみレンダリングされます。

@-moz-document url-prefix() {

}
于 2012-01-28T21:14:25.543 に答える