Данный пост основан на переводе интересной англоязычной статьи "10 Fixes That Solve IE6 Problems". Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не ...
Как вы уже могли заметить, страницы моего блога некоторое время назад стали «резиновыми». Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью ...
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Комментарии (58)
На первый взгляд, вроде бы всё перечислил… будет очень полезным новичкам, или склеротикам типа меня, которые вечно забывают про какие нибудь мелочи при использовании хаков для ие6, так-как принципиально не люблю этот древний, 2000 года браузер. Спасибо в общем, что тут ещё скажешь.
И тебе спасибо за комментарий ;)
Да, IE6 еще тот хардкор, обычно если верстаю верстаю под нормальные браузеры, у уже потом пытаюсь допилить все то что отъехало в IE.
Под кат забыл засунуть. (:
Блог растянулся на километр вниз.
Я не пользуюсь катом.
Спасибо большое!
Хотел сказать что первый совет самым важным является. Хотя во всех книжках пишут про этот параметр, но все равно забываешь его всегда вставить.
Тут у меня тоже со страницей проблемы были, в IE сужался тег, а в других браузерах наоборот расползался, так вот DOCTYPE вставил, а все отлично стало везде отображаться.
Чтобы не забывать, рекомендую использовать шаблон страницы, который будет содержать все обязательные теги и доктайп. Всегда так делал, поэтому доктайп никогда не забывал =)
предлагаю дружно отправить ie 6 на свалку истории, он свое сделал, хватит уже точить свои проекты под заранее устаревшие браузеры
Уже давно все хотят это сделать, но реальность такова, что пока это не возможно.
IE6 еще очень долго не отправится на свалку, так как им пользуется очень много людей (я знаю пример, что в одном не очень маленьком банке вообще все сидят на IE5.5). Поэтому приходится с ним считаться.
Доктайпом продолжаю по привычке пользоваться Transitional, а тестировать сразу в нескольких браузерах. Мне проще заранее устранить появляющиеся косяки в любом браузере (не только IE), чем потом думать как их устранить.
Из статьи почерпнул мало нового, но от этого она хуже не стала. Правильно, что собрали все в одном посте, хоть это и перевод.
Dimox, а в чём принципиальное различие между Transitional и Strict?
Я тоже пользуюсь Transitional и пока не жалуюсь. :)
Прочитай вот эту статью с хабра и все станет ясно: habrahabr.ru/blogs/webstandards/45 962/
Спасибо:)
Кстати, есть свободные инвайты на хабру?
У меня там нет инвайтов.
жалко от этой заразы патч Бармина не помогает
У плавающих элементов двойной отступ появляется только если элемент изначально блочный. Попробуй img сделать плавающим и добавить отступ.
Спасибо за уточнение, не знал. Мне это нужно усвоить, а не то никак не мог понять зависимость =)
половина не работает. делайте на яве проверку и ссылку на обновление до ие7
много для себя узнал нового, еще правда не все попробовал)
Пасяб за статейку — весьма полезная! в качестве дополнения скажу, что чтобы изначально минимизировать траблы с ослом, за основу беру таблицы с ячейками, распертыми дивами.
Спасибо за статью. Хоть пользователей шестого осла становится всё меньше — пока что считаться с ним приходится (((
Да хорошая статья. Слушайте, Dimox вы можете кинуть на почту линк, на русскую статью по поводу отступов в ие6 после картинок часто пробелы какието левые появляются, или допустим если у элемента задана высота, он может быть выше если там три дива и в коде пробелы. пока не уберешь или не задашь overflow: hidden… проблема не исчезает, думаю сталкивались с этим, а еще между строками списка вечно вылазит такое, помню там инлайн надо делатЬ. но иногда инлайн мешает. есть ли какое решение?
Ссылок я не знаю. Гугл в помощью, с его помощью все можно найти.
Картинки по умолчанию в ие имеют отступы, чтобы их убрать надо обнулить их в CSS: margin:0; но обнуление это работает только если имга блочная… тоесть еще ей надо поставить свойство либо float, либо display: block;. Одновременно нестоит применять эти правила если нет в том необходимости, потому что если у элемента будет margin боковой то в ие6 он удвоится. Боковые внешние отступы в ие6 при применении к ним свойства float удваиваются только у изначально блочных елементов, либо же у тех елементов которым заданно вместе с float свойство display: block.
Если есть float то элемент уже становится блочным (иногда это забывают, особенно новички)
Можете уточнить что Вы имеете ввиду? Просто даже немогу сразу придумать как может мешать display: inline флотнутому элементу…
Есть решение — по возможности меньше использовать float.
Если есть фозможность то обойтись display: inline без float, при этом в IE6, IE7 (насчет 8 неуверен, так как всегда добавляю строку чтобы 8й вел себя как 7й) будет «инлайновый» (незнаю как назвать точнее) левый отступ на 3px больше чем у остальных браузеров, например так происходит с «лишкам» списка.
Если список обычный (не горизонтальный) то в IE6 иногда вериткальные отступы появляются — «лечится» либо li{float:left; width:100%}, но невсегда можна ставить ширину в 100%(например если есть боковые паддинги), и если жеско задавать в пикселах тоже нельзя; либо ей же li{height:1%; overflow: hidden; vertical-align:top}
По идее Америка открыта не была, но все вещи важные. Эх… Скорее бы человечество избавилось от шестого осла… А пока что: потирает руки: будем верстать ^_^
Спасибо за добрую помощь. Как раз, позарез нужна была именно эта информация. Пойду пробовать на своем сайте.
Спасибо большое за такую полезную информацию. Очень пригодилась!
применить ко всем плавающим элементам display: inline;
— Огромное спасибо! Помогло… добрых 3 часа с ума сходил. Проклял IE6.
Еще, чтобы избавиться от двойного отступа у блоков с float в IE6,7, можно вложить в блок с float другой блок, и от него уже делать отступы (иногда display: inline не помогает)