Научим непокорные браузеры понимать html 5 тэги. Самое оптимальное решение проблемы - использование специального скрипта. В секции head в файле index.html прописываем следующий код (сразу же под строкой, подключающей css файл):
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Сохраняемся, обновляем страницу и видим, что теперь ИЕ понимают все, что от них хотят. Так же стала видна проблема с отображением слогана в ИЕ 7. Что бы устранить ее, сделаем картинку блочной и немного увеличим ей нижний отступ.
/*Было*/ .header_wrap a.logo img { margin-bottom:12px; } /*Стало*/ .header_wrap a.logo img { margin-bottom:16px; display:block; }
И последняя неприятность - закругленные углы у фона ссылок меню при наведении. ИЕ 7-8 не понимают css 3 свойства border-radius. Тут можно было бы поступить по разному - например, использовать спрайты, либо же закруглить углы с помощью скрипта. Раз мы используем css 3, то не будем ничего менять и обратимся к скриптам (метод позаимствован с форума хаброхабр). Решение с помощью спрайтов (картинок) рассмотрим в другой раз.
Итак, качаем скрипт по ссылке ниже и распаковываем содержимое архива в папку synchronous/html/ (в корень сайта):
Но для решения данной проблемы одного лишь PIE будет недостаточно. Фон с закругленными углами должен появляться при наведении мыши на ссылку, чего не произойдет, если просто подключить PIE к требуему блоку. Что бы добиться желаемого, попросим помощи у фреймворка jQuery.
В папке synchronous/html/ создаем директорию js, качаем архив библиотеки jQuery с сайта разработчика, или по ссылке ниже. Распаковываем содержимое архива в паку js.
Создаем в Notepad++ новый файл, сохраняем его в папку js с именем my_script.js и пишем в этом файле следующий код:
//dinamic PIE for IE 7-8 var ie = jQuery.browser.msie, ieV = jQuery.browser.version, ltie7 = ie&&(ieV <= 7), ltie8 = ie&&(ieV <= 8); function setPie(selectors){jQuery(selectors).css("behavior", "url(PIE.htc)")}; function unsetPie(selectors){jQuery(selectors).css("behavior", "none")}; function resetPie(selectors){ unsetPie(selectors); setPie(selectors); }; jQuery(document).ready(function(){ //dinamic PIE width hover jQuery(".top_nav li a").hover( function () { ltie8 ? resetPie(".top_nav li a") : false; }); });
Подключаем библиотеку jQuery и файл my_script.js к странице (если нужны подробности подключения jQuery - смотрим тут). Секция head в index.html теперь будет выглядеть следующим образом:
<head> <meta charset="utf-8" /> <title>Главная</title> <link rel="stylesheet" href="/css/style.css" media="screen" /> <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/js/my_script.js"></script> </head>
Сохраняем все изменения, обновляем страницу в IE 7,8 и смотрим на результат. Вот теперь наступила всеобщая красота. Страница отображается одинаково во всех требуемых браузерах. В принципе на этом можно было бы и закончить, но давайте немного оптимизируем css код. Некоторые стили для ссылок в навигации и для ссылки в логотипе пересекаются - будет правильнее их объединить.
/*Было*/ .header_wrap a.logo { margin:0 auto; padding-top:25px; width:321px; display:block; font-size:14px; color:#616161; text-transform:uppercase; text-decoration:none; } .top_nav li a { padding:10px 20px; display:block; font-size:18px; color:#616161; text-transform:uppercase; text-decoration:none; } /*Стало*/ .header_wrap a.logo, .top_nav li a { display:block; color:#616161; text-transform:uppercase; text-decoration:none; } .header_wrap a.logo { margin:0 auto; padding-top:25px; width:321px; font-size:14px; } .top_nav li a { padding:10px 20px; font-size:18px; }
Код не стал на много короче, но такая запись будет более грамотной. Вот, собственно, и все - мы закончили верстку общей структуры страницы и хедера, победили капризы непокорных браузеров. Если вы запутались в коде и не можете понять что, куда и зачем писать, то по ссылке ниже можно скачать готовый пример того, что было сделано на данный момент, или посмотреть итоговый вариант всей работы.
Далее нас ожидает работа с элементами футера и разметка центральных колонок сайта.