Сайт візитка - виправляємо недоліки в ІЕ 7 та 8
Навчимо непокірні браузери розуміти html 5 теги. Найоптимальніше вирішення проблеми – використання спеціального скрипту. У секціїhead у файліindex.html прописуємо наступний код (відразу ж під рядком, що включає css файл):
Зберігаємось, оновлюємо сторінку і бачимо, що тепер ІЕ розуміють усе, що від них хочуть. Так само стала видна проблема з відображенням слогана в ІЕ 7. Щоб усунути її, зробимо картинку блокової і трохи збільшимо їй нижній відступ.
І остання неприємність – закруглені кути біля фону посилань меню при наведенні. ІЕ 7-8 не розуміють css 3 властивостіborder-radius. Тут можна було б зробити по-різному - наприклад, використовувати спрайти, або ж закруглити кути за допомогою скрипта. Якщо ми використовуємо css 3, то не будемо нічого змінювати і звернемося до скриптів (метод запозичений з форуму хаброхабр). Рішення за допомогою спрайтів (картинок) розглянемо в інший раз.
Отже, качаємо скрипт за посиланням нижче і розпаковуємо вміст архіву в папкуsynchronous/html/ (в корінь сайту):
Але для вирішення цієї проблеми лише PIE буде недостатньо. Фон із закругленими кутами повинен з'являтися при наведенні миші на посилання, чого не станеться, якщо просто підключити PIE до необхідного блоку. Щоб домогтися бажаного, попросимо допомоги у фреймворку jQuery.
У папціsynchronous/html/ створюємо директоріюjs, качаємо архів бібліотекиjQuery з сайту розробника, або за посиланням нижче. Розпаковуємо вміст архіву в пакуjs.
Створюємо в Notepad++ новий файл, зберігаємо його в папкуjs з ім'ямmy_script.js і пишемо у цьому файлі наступний код:
Підключаємо бібліотеку jQuery та файлmy_script.js до сторінки (якщо потрібні подробиці підключення jQuery – дивимося тут). Секціяhead уindex.html тепер виглядатиме так:
Зберігаємо всі зміни, оновлюємо сторінку в IE 7,8 та дивимося на результат. Ось тепер настала загальна краса. Сторінка відображається однаково у всіх браузерах. В принципі на цьому можна було б і закінчити, але трохи оптимізуємо css код. Деякі стилі для посилань у навігації та для посилання в логотипі перетинаються – буде правильніше їх об'єднати.
Код не став набагато коротшим, але такий запис буде грамотнішим. Ось, власне, і всі – ми закінчили верстку загальної структури сторінки та хедера, перемогли капризи непокірних браузерів. Якщо ви заплуталися в коді і не можете зрозуміти що, куди і навіщо писати, за посиланням нижче можна завантажити готовий приклад того, що було зроблено на даний момент, або подивитися підсумковий варіант усієї роботи.
Далі на нас чекає робота з елементами футера та розмітка центральних колонок сайту.