Данный пост основан на переводе интересной англоязычной статьи "10 Fixes That Solve IE6 Problems". Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не ...
Как вы уже могли заметить, страницы моего блога некоторое время назад стали «резиновыми». Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью ...
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Комментарии (58)
Распространенная проблема также — это padding в ие6, — при увеличении padding блока, размер блока во всех браузерах увеличивается (кроме ие), таким образом приходится наблюдать уменьшенный блок в ие6 (т.к. был уменьшен поскольку паддинг возвратит его оригинальный размер). Хотелось бы на эту часто замещаемую проблемку тоже вменяемый ответ услышать
Эта проблема наблюдается, когда используется типа документа «HTML 4.01». Используйте «XHTML 1.0» и padding во всех браузерах будет одинаковый.
Да нет, я как раз всегда XHTML 1.0 использую, все равно иногда бывает, сейчас даже специально посмотрел.
Тогда странно. Я с подобным ни разу не сталкивался. Можете пример показать?
Блин, я уже переисправлял все — сейчас во всех браузерах нормально. Верстаю частенько, если как-нибудь еще встретится выложу.
Опачки, выцепил. Гляньте, даже просто ради интереса, да и сами же сталкиваемся иногда, у меня опыта пока не много, может я что не так делаю:
(это выдрано из Joomla 1.5)
сам код (от ctrl+u)
<?xml version="1.0″ encoding="utf-8″?><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml»
xml: lang="ru-ru"
lang="ru-ru"
dir="ltr"
>
<head>
<link href="/mysite/templates/mysite/css/template.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="content">
<div id="content_top">
</div>
<div id="content_body">
</div>
</div>
</body>
</html>
CSS:
#content_top {
width: 702px; /*ширина с учетом паддинга — 702*/
height: 36px;
padding-top: 17px;
padding-left: 66px; /он самый собственной персоной/
border: 1px solid;
}
#content_body {
width: 770px; /*оригинальная ширина — 770*/
height: 36px;
border: 1px solid;
}
Не понимаю, для чего вам понадобилось это:
В этом-то как раз и заключается проблема с IE6.
Спасибо, большое! Так просто ставят — в шаблонах Joomla, с кодировкой тоже вроде проблем, после исправления, не заметил))
Большое спасибо за информацию, действительно удобно в одном месте читать.
Для себя два пункта увидел новых, значит стал два пункта эрудированней чем час назад))
Кстати, про дублирование символов замечу, что встречал также вариант когда именно комментарий вызывал дублирование символов.
Я тогда не стал вдаваться насчет расположение комментария, а просто проверил:
удаляешь комментарий — в начале следующего блока исчезают лишние, повторяющиеся с предыдущего блока символы.
Спасибо за полезные советы в работе с IE6, уж очень я намаялся с ним.
У меня проблема появилась после того, как я создал дополнительную страничку на сайте с текстом на бэкграунде, а у нашего дизайнера как раз стоит этот злое… й IE, так вот, текст в осле был увеличен на 2 пункта, чем в остальных браузерах (8 осел справился с задачей).
Я использовал параметр текст
Спасибо за статью, очень нужные вещи написаны. Как работал на одним проектом, думал вообще отказаться от IE6 ан нет, щас попробуем переписать стили
Эта фраза спасла меня от виселицы. Огромное спасибо! :)
У меня может кто-то исправлял баг. Подскажите где конкретно приписать правила описанные в пункте «5».
В стилях проблемного блока.
Спасибо за совет. Попытаюсь решить эту проблему.
ИЕ6 по статистике уже использует в среднем в мире менее 5% пользователей. Тем не менее это наиболее популярный браузер из всех устаревших, которые не соответствуют современным стандартам, требованиям и возможностям.
Но вместо того, чтобы отображать пользователям кривой сайт с ошибками, или повышать стоимость сайта из-за траты времени на верстку под ие6 (а особенно не у очень опытных разработчиков это занимает очень много времени), можно отобразить предупреждающее окошко пользователю, о том, что его браузер очень устарел. Во всяком случае пользователь будет в курсе дела.
Даже если и добиться приемлимого вида сайта для ие6, он не может реализовать все, что могут современные браузеры и никогда не сможет, потому что у этого браузера есть новые версии для их реализации.
Я пользуюсь скриптом от этого сайта ie6no. Недавно видел, что заведен проект на google code.
Хотя, думаю, в свое время этот браузер был все-таки неплох.
Я вообще запретил просмотр этого блога в IE6.
Спасибо огромное за статью))) Ток что открываю готовый сайт в IE6 и прихожу в ужас… Ну думаю всё, ща часа 3 сидеть исправлять буду. Наткнулся на статью и увидел тут «применить ко всем плавающим элементам display: inline;»
Одна минута и всё отлично как и должно было быть… осталось ток с картинками разобраться)))
Сверстал страницу и с отображением в разных браузерах все ок, но вот в IE6 при скролле страница иногда провоцирует вылет браузера. Может кто че подскажет.
спасибо за советы! у меня заработало))
Здравствуйте Dimox! у меня такая проблемка с IE6 пример
В IE6 смотрел через iedeveloper toolbar показывает что селектор класса применен к html тэгу, но все свойства содержащиеся в селекторе проигнорировал блок так остался стоять на весь wrapper со свойствами по умолчанию от ie6. Еще смотрел через firebug lite в нем вообще показывает: unknown {outline:0} в нем даже селектор не применен типа просто блок без атрибутов, Dimox заранее вам благодарен за любой ответ
Не понял, в чем заключается проблема.
7 строка
Ошибка в html-разметке.
«трабл у некоторых дочерних элементов в IE6 часто возникает, когда у родителя установлен паддинг»
А что именно за трабл?
У меня возникла проблема: когда у блока wrapper свойство padding больше определенного значения, абсолютноспозиционированный блок (относительно wrapper-a который позиционируется) исчезает в IE6. И haslayout не помогает…
Сейчас уже и не помню, к сожалению.
height: 1%; очень помогло в IE6, на Wordpress версия 3.2.1,
меню съезжало вниз, в шаблоне по умолчанию, в файле style. css добавил:
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
height: 1%;
}
и заработало, почти как надо :)
Спасибо автору!
Добрый день, есть проблема, контент во всех браузерах находится по центру. В 6, 7 ie он же прилипает к левому краю так не понимает свойство margin: 0 auto. Подскажите какие есть способы решения этой проблемы? сп.