Блок сайта, созданный с использованием CSS в первый раз, некорректно отображается в Firefox и Safari - PullRequest
0 голосов
/ 29 января 2012

Я пытаюсь заменить созданное на flash меню сайта простым меню с изображением и ссылками.Я делаю это с помощью CSS.Фоновое изображение вставляется со значением CSS: background: url(/image.png), а меню - это просто список тегов <a> (со стилем CSS для отображения белого цвета без подчеркивания и т. Д.).Он отлично работает в Google Chrome и 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, Safari на Mac) при первом отображении некорректно отображают меню, например:

incorrect menu

(стиль CSS для <a> тег и фоновое изображение не работали).Все остальные части страницы отображаются с правильным стилем из файла CSS.

когда пользователь обновляет страницу, она всегда отображается правильно.

Кроме того, я не могу получить эту ошибку в Firefox на моих других компьютерахи когда я очищаю кеш.

Вопрос в том, как изменить код, чтобы он всегда работал корректно в любом браузере?

1 Ответ

0 голосов
/ 29 января 2012

присвоить тегу отображение блока

display: block;

чтобы заставить его работать на moz, вы всегда можете использовать это (хотя старайтесь этого не делать). все, что происходит внутри этих фигурных скобок, будет отображаться только в Mozilla.

@-moz-document url-prefix() {

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...