10 обурливих багів IE та шляхи їх вирішення
Сьогодні я маю намір представити вам 10 найпоширеніших багів, що мають місце в браузерах IE, а також розповім як їх уникнути.
Вступ
У практиці кожного веб-розробника були проблеми, пов'язані з нерозумінням браузерами IE деяких елементів коду. І я як розробник теж постійно стикаюся з такими вигадками IE, що часом просто хочеться битися головою об стінку! Однак, час іде, ми вчимося на своїх помилках, хоча правильніше буде сказати не своїх, а браузера IE, і починаємо розуміти та звикати до його дивної поведінки. Нам доводиться з цим миритися, тому що ще є користувачі, які продовжують користуватися 6 версією IE. Найкращий спосіб попередити проблеми - це звіряти кожен свій крок із поведінкою різних браузерів. Адже простіше усунути помилку відразу ж, ніж потім нишпорити серед тисяч рядків html і css кодів.
А поки що, я вас ознайомлю зі списком багів та способами їх усунення, і, сподіваюся, цим трохи полегшу вам життя.
1. Баг IE6, що видає текст повторно
Якраз перед тим, як сісти писати цю статтю я зіткнувся ось із таким багом: з нізвідки вискакує дубльований шматок тексту, і він розміщується просто під оригінальним текстом. Я почав експериментувати і про удачу!, я знайшов як з ним боротися.
Є безліч способів вирішити цю проблему, але жоден із них мені не підходив, тому що я працював над дуже складним проектом. І ось я знайшов дуже простий і цікавий спосіб: просто додав ряд нерозривних прогалин прямо за оригінальним текстом.
2. Position Relative та Overflow Hidden
Практично щоразу, коли я пишу урок з jQuery, я стикаюся з однією і тією ж проблемою, адже я звик використати overflow:hidden. Баг з'являється, коли є вихідний(Батьківський) елемент overflow зі значенням hidden і дочірній елемент з позицією :relative.
Що ж відбувається ви можете побачити ось у цій статті - position:relative and overflow in Internet Explorer
Рішення • додати position relative та батьківському елементу
3. Min-Height для IE
IE просто ігнорує min-height властивості, але ви тепер можете подолати і цю проблему. Дане рішення магічно діє не тільки на IE6, а й на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2
4. Бікубічне відображення масштабованих зображень
Вам сподобається це рішення. Чи подразнює вас погана якість картинок при зміні їх масштабу в браузері IE? Погодьтеся IE виконує це завдання не дуже якісно.
5. Прозорість PNG
Вважаю, що кожен знайомий з цією проблемою, і все ж таки я приділю і цьому пункту трохи часу. Якщо вам потрібно прозоре зображення, і зображення у форматі gif не можуть дати вам потрібного ефекту, вам знадобиться цей прийом. Але пам'ятайте, що використовуючи цей прийом і встановлюючи PNG як тло, ви не зможете задати його позицію.
6. Прозоре тло вбудованого вікна IFrame
У firefox і safari нам не доводиться щось налаштовувати, оскільки вони роблять фон iframe прозорим за умовчанням, тоді як у IE таке не передбачено. Тут вам потрібен буде атрибут allowtransparency, а також спеціальний CSS код.
7. Відключення вертикальної смуги прокручування, передбачене в IE за умовчанням
За промовчанням IE завжди відображає вертикальну смугу прокручування, навіть якщо вміст сторінки повністю вміщується у вікно браузера. В даному випадку ви можете скористатися властивістю overflow:auto, щоб смуга прокручування з'являлася тільки принеобхідності.
8. Псевдоклас :hover
IE підтримує лише псевдоклас :hover для елемента anchor. Але ж того ж ефекту можна досягти і використовуючи jQuery.
9. Блокова модель - Box Hack Model
Це найчастіший баг. Річ у тім, що IE розраховує ширину негаразд, як інші браузери. Відповідно до стандарту консорціуму W3C, повна ширина повинна підраховуватися так:
А ось IE робить підрахунок, не враховуючи дані відступів та кордонів
Можна скористатися наступним кодом CSS. Всі стандартні браузери зможуть прочитати такий рядок – width:180px, крім IE5.
10. Подвоювання полів
Якщо у вас є float елементи зі значеннями полів left або right, то 6 версія IE подвоює поля. Наприклад, поле (інтервал) шириною в 5 пікселів ось у такому рядку margin-left:5px в IE6 перетвориться на поле з шириною в 10 пікселів. Цю проблему можна усунути, додавши лише один рядок display:inline.
Сподіваюся, цей урок вам знадобиться:)
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.queness.com Переклав: Максим Шкурупій Урок створено: 16 Листопада 2009 Переглядів: 36012 Правила передруку
5 останніх уроків рубрики "Різне"
Як розмістити свій сайт на хостингу? Правильно обраний хороший хостинг – це майбутнє Ваших сайтів
Проект готовий, Все перевірено на локальному сервері OpenServer та можна переносити сайт на хостинг. Ось тільки яку компанію вибрати? Пропоную переглянути хостинг fornex.com. Відмінне місце для твого проекту із перспективами бурхливого зростання.
Розробка веб-сайтів за допомогою онлайн платформи Wrike
Створення вебсайту - процес трудомісткий, що вимагає злагодженої взаємодіїміж замовником та виконавцем, а також між усіма членами колективу, залученими до проекту. І в цьому дуже хорошу підмогу надасть онлайн платформа Wrike.
20 ресурсів для прототипування
Добірка з кількох десятків ресурсів для створення мокапів та прототипів.
Топ 10 безкоштовних хостингів
Невелика вибірка провайдерів безкоштовного хостингу з детальним описом.
Швидка замітка: масовий UPDATE у MySQL
Ні для кого не секрет як у MySQL реалізувати масовий INSERT, а ось з UPDATE можуть виникнути складності. Щоб не вдаватися до маніпуляцій події ON_DUPLICATE, можна скористатися спеціальною конструкцією CASE … WHEN … THEN.