Ошибка с блочными ссылками в IE6


Содержание

Кто как борется с IE6, IE7, IE8?

16.11.2011, 21:08

Отображение кракозябр в IE6-IE7
Добрый день не пойму почему у меня в на сайту в Интернете Эксплорере в 6 и 7 версиях.

Перечень косяков браузеров Ie6 Ie7
Есть ли какой нибудь «перечень проблем» для браузеров Ie6 и Ie7. Нужен для создания оптимального.

странная ширина страницы в ie6, ie7
добрный день. помогите пожалуйста решить такую проблему кроссбраузерности css. есть сайт.

Верстка под ie6 — ie7 — актуально ли?
Вопрос -1. Интересно кто ни будь еще верстает под ie-6 и 7 или эти браузеры уже неучитываются. .

Подключение стилей для IE6-IE8
Уважаемые эксперты! Помогите с решением внешнего вида страниц сайта в IE6-IE8. Что нужно писать в.

16.11.2011, 21:32 2 16.11.2011, 22:05 [ТС] 3 16.11.2011, 22:18 4
16.11.2011, 22:18
16.11.2011, 22:42

Я вот счастливый человек, по работе нужна поддержка только 9 IE :)

Стратегия исправления ошибок в IE6?

Как правило, какой лучший способ решить ошибку макета в IE6? Каковы наиболее распространенные ошибки или проблемы, которые следует искать, пытаясь понять, почему ваша страница внезапно выглядит как обезьяна, закодированная?

12 ответов

Первые вещи

Получите панель инструментов разработчика Internet Explorer. Это спасатель жизни и отлично работает с IE6 и/или IE7. Это не замена для Web Developer Toolbar или Firebug для Firefox, но это лучше, чем ничего.

Знай своего врага

Читайте на причудах IE — особенно hasLayout и переполнение и тому подобное. Есть также много тонкостей CSS, которые вам придется либо обойтись без, либо найти альтернативы. Посмотрите, сколько из популярных JavaScript toolkits/рамки/библиотеки обходят различные проблемы.

Рим не был построен в течение дня

Чем больше вы должны работать с ним, тем больше вы будете помнить, и вам не придется искать так часто. Там просто нет замены опыта в этом. Однако, как отметили некоторые, в сети есть большие ресурсы. Position Is Everything, безусловно, там.

4 petr k. [2008-09-17 17:19:00]

Он содержит подробные и подробные описания ошибок браузера, а также варианты их работы. A должен читать, на мой взгляд,

2 Alex King [2008-09-17 17:20:00]

Одним из хороших способов начать изучение того, как IE будет искажать страницу, является включение красных границ в разные элементы с помощью CSS ( border: 1px solid red; ). Это сразу же скажет вам, является ли проблема с запасом или проблемой заполнения, насколько широка эта функция и т.д.

Заметил, что запись Marc находится на -2 = D. Он только говорит «прибегать к столам», даже если они дуют, потому что в таких сочных браузерах, как IE6, некоторые из сломанных команд CSS работают только в таблицах (кто знает, почему. дамба вам Билла Гейтса. ). Здесь хорошая ссылка на то, что работает и не работает до CSS. http://www.quirksmode.org/css/contents.html. Это отличная ссылка на проверку того, какие классные эффекты работают/не работают с различными широко используемыми браузерами. Кроме того, у вас всегда есть план для пользователей, которые просматривают IE6 (хотя это примерно так же стара, как и механическая грязь), поскольку многие компании по-прежнему используют старые браузеры (включая некоммерческие организации/страны третьего мира и т.д.). Таким образом, создайте выпадающее меню bugged out, которое выглядит WAY лучше, чем стандартное горизонтальное меню, но создайте вторичный для IE6, который становится стандартным, когда страница получает запрос от браузера IE6.

Модель коробки обычно является виновником. В основном это означает, что любой div, который вы пытаетесь расположить и использовать неподдерживаемый CSS, вызовет эту проблему.

Возможно, это произойдет, если вы используете min- или max- .

это обеспечивает отличную ссылку для проверки совместимости с различными версиями.

0 qui [2008-09-17 17:32:00]

Общей проблемой является заполнение, которое не добавляется к ширине элемента блока. Поэтому для макета div, избегайте использования дополнений и вместо этого используйте элементы внутри них, чтобы определить заполнение.

Я использую Rafel Lima Browser Selector, когда мне нужно настроить различия между браузерами IE/стандартов. Это значительно сокращает использование «хаков» в вашем HTML для решения общих проблем.

Вы можете настраивать инструкции CSS для разных браузеров или даже разных версий браузеров (Hello IE 6). Это очень просто реализовать, но требует, чтобы пользователь включил JavaScript (большинство из них).

0 [2008-09-17 17:20:00]

как вы определяете ошибку макета? самая сложная реализация макета (я не знаю, должна ли это быть определена как ошибка) в IE, нам нужно всегда указывать style = «display: inline» в теге HTML , чтобы пустая строка не по-видимому, нарушают компоновку формы.

Этот вопрос, который, я считаю, имеет слишком много возможностей.

Подтвердите свой код, и если боль сохраняется, ну, удачи.

Единственными реальными решениями, как и с любым другим типом ошибок шара, являются google для решения или спросите кого-нибудь, кто знает (то есть: дайте нам точную проблему здесь в stackoverflow).

Вы можете использовать панель инструментов IE Dev, чтобы собрать Идею, но многие из ошибок являются случайными, необъяснимыми и эзотерическими. IE: ошибка гильотины, ошибка дублирования случайных предметов и т.д. И т.д., Список можно продолжать, и вы можете тратить часы буквально на гул с глупыми переменными везде и ничего не добиваться.


У меня есть простая стратегия, которая работает каждый раз.

Сначала я разрабатываю сайт с использованием общепринятого CSS, чтобы хорошо выглядеть в Safari и Firefox 3. Подробнее см. w3schools.com. поддержка.

Затем я перехожу в IE6 и IE7 и изменяю CSS, используя условное включение.

Это взломать и позволяет обрабатывать разные браузеры (IE6 и IE7 имеют отдельные проблемы).

Большинство проблем, которые вы найдете, связаны с неподдерживаемыми функциями IE (например, min-width), ошибками в коробке (IE добавляет невидимые дополнительные дополнения (3px) в некоторые поля) или проблемы с позиционированием. Пойдите для этих первых, поскольку они часто являются проблемой.

У нас была проблема с плавающим div, которая была очевидна только в конкретной версии IE6. Это было исправлено, загрузив последний пакет обновления.

В теории используйте CSS, совместимый с ошибками макета IE6, используйте только хорошо известные обходные пути (фильтры css и html) и код для них таким образом, чтобы не нарушать совместимость, проверяйте режим quirks/strict.

Проблема с ссылками на IE6 и IE7

Мне сложно с IE6 в последнее время по какой-то конкретной проблеме, вот бит html, на котором я нахожусь:

Все в порядке с Firefox и т.д., но ссылка не будет работать, щелкнув непосредственно на изображении в IE6 (но будет работать в другом месте по ссылке).

У кого-то есть идея?

  • edit: Это не работает в IE7:/

Спасибо за ваши ответы!
Мне нужен тег span. Я должен был объяснить немного больше, что я пытался сделать; вот оно:
Мне нужна коробка с возможностью клика. Внутри этого мне нужно:

  • еще один ящик с фиксированным размером, который будет содержать динамическое изображение (случайное соотношение)
  • некоторый текст

Я просто попробовал:

Удалить тег span, я не думаю, что вам это нужно

Если у вас есть контроль над разметкой, извлеките встроенные стили и используйте

В начале документа добавьте ссылку на внешнюю таблицу стилей

Создайте style.css и добавьте

Если вы используете этот стиль ссылки в нескольких местах, удалите идентификатор на div и замените на

И измените селектор в css С# на.

Если у вас есть проблемы только в IE6, вы также можете использовать условные комментарии для включения таблицы стилей, которая исправляет специфические проблемы IE6.

Как ни странно, удаление свойств ширины и высоты из диапазона позволяет вам щелкнуть по изображению.

Конечно, это полностью меняет макет, но может помочь решить проблему с IE.

Альтернативным методом будет использование div с фоновым изображением вместо элемента img:

Edit:

Решение фонового изображения не работает для изображения случайного отношения, которое вы упомянули в своем комментарии. Если вы просто хотите достичь макета в макете:

Я столкнулся с почти идентичной проблемой, создающей навигацию на сайте, управляемом контентом, но усугублялся тем фактом, что некоторые элементы навигации, которые необходимо было открыть в новых окнах, означало, что решение использовать javascript стало проблематичным.

В конце концов, я потерял тега и замены с помощью и установить фоновое изображение внутри диапазона (я мог бы использовать div, но эту плохую форму в соответствии с W3C).

Итак, вернемся к вашему первоначальному примеру, я бы пошел с:

Самый простой способ сделать эту область интерактивной — добавить позицию: относительно стиля вашей ссылки; чтобы сохранить стиль курсора в IE6, вы можете добавить курсор: рука к вашему элементу span.

Как и было предложено, лучше отделить стиль IE6 с условным блоком комментариев.

Надеюсь, это поможет и удачи;)

Я не смог решить это только с помощью CSS, я использовал Javascript, чтобы заставить область быть кликабельным. Разочаровывает, но хорошо, он работает.

Спасибо всем за вашу помощь! Я ценю это:)

Попробуйте применить свойство span css «zoom: 0;». Это работает в моем случае.

Ошибка с блочными ссылками в IE6


Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Добро пожаловать на сайт поддержки XOOPS.

Приднестровская поддержка XOOPS

На текущий момент самыми «проблемными» браузерами остаются Internet Explorer 6 (и в меньшей степени 7). Используя накопившиеся методические наработки, вы сможете обеспечить надежную работу своих сайтов в этих браузерах, не отказываясь при этом от создания сложных макетов страниц, позволяющих получить все преимущества поддержки технологии CSS последними версиями браузеров.

Решение
Приведу свои соображения по поводу различных методов работы с CSS и советы по обеспечению нормального отображения сайтов Internet Explorer 6 и 7.

Процесс разработки
Следующая схема работы помогает мне избежать большинства возможных ошибок IE6 и 7.

Работайте с самым современным браузером
Изначально следует разрабатывать сайт с расчетом на современные браузеры, хорошо поддерживающие спецификацию CSS, например, последние версии Firefox, Opera и Safari. Поддержка браузерами стандартов CSS становится все более полной, а вовсе не наоборот, поэтому написанный код также должен соответствовать спецификации, поскольку в этом случае он будет корректно отображаться будущими браузерами. В процессе разработки сайта я никогда не открываю его в Internet Explorer, поскольку в этом случае может быть трудно удержаться от написания дополнительного кода для исправления найденных ошибок.

Для начала нужно убедиться, что сайт нормально работает в браузерах с хорошей поддержкой CSS, а уже потом заниматься поправками для остальных браузеров.

Проведите валидацию HTML- и CSS-кода
Если ваша разметка соответствует стандартам W3C, то возникающие в старых браузерах ошибки будет легче исправить. Браузеры по-разному обрабатывают код, в который закрались ошибки, и потому незакрытый тег

Протестируйте сайт в других современных браузерах
Затем посмотрите, как сайт отображается в других современных браузерах: Firefox, Opera, Safari, Chrome и Internet Explorer 8. Мне довольно редко приходится вносить в код какие-либо исправления для этих браузеров, и они, как правило, незначительны и касаются реализации отдельных элементов структуры документа. Для современных браузеров я никогда не использую хитроумные приемы или альтернативные таблицы стилей, поскольку всегда можно найти более простой способ решения проблемы.

Проверьте сайт в Internet Explorer 6 и 7
Если ваш CSS-код прошел валидацию и корректно обрабатывается большинством современных браузеров, то пришло время исправлять ошибки его интерпретации старыми браузерами. Я твердо придерживаюсь мнения, что не стоит нагромождать свой код дополнениями, предназначенными для устаревших браузеров.

Скорее всего, при просмотре сайта в IE6 вы обнаружите какие-либо проблемы – возможно, небольшие несоответствия вроде лишних отступов между элементами страницы или более серьезные недочеты – например, когда определенные части вашей страницы «уезжают» из предназначенной для них области или вовсе исчезают. В такой ситуации главное – сохранять спокойствие. Большинства сбоев IE6 можно с легкостью избежать, изменив или добавив несколько правил стилей специально для этого браузера. То же самое можно сказать и о IE7, с тем лишь исключением, что этот браузер работает более корректно.

Добавьте таблицы стилей, предназначенные для конкретных браузеров, с помощью условных комментариев
На данном этапе нужно добавить дополнительные таблицы стилей для IE6 и/или IE7 с помощью условных комментариев. Этот метод был рассмотрен в предыдущем разделе. Такую таблицу стилей нужно добавить в заголовок (head) вашего документа после уже указанных в его HTML-коде таблиц стилей, чтобы содержащиеся в них правила, написанные специально для Internet Explorer 6 и 7, переопределили аналогичные правила в основной таблице стилей.

Исправление ошибок, возникающих в Internet Explorer
Теперь можно постепенно начать исправление возникающих в Internet Explorer 6 и 7 ошибок, добавляя необходимые правила в альтернативную таблицу стилей, будучи в полной уверенности, что они будут использованы только теми браузерами, для правильной работы которых они необходимы. Использование рассматриваемых ниже приемов позволяет избежать большинства проблем Internet Explorer 6. Для исправления сбоев Internet Explorer 7 обычно необходима лишь часть из них. В IE7 редко встречаются «баги», отсутствующие в IE6, а алгоритм их исправления, как правило, один и тот же.

Проверьте DOCTYPE
Убедитесь, что в первой строчке вашего документа указано правильное описание типа документа. О важности использования правильного элемента doctype говорилось в предшествующем разделе «Что такое режим совместимости и как его избежать?». Указание неправильного типа документа может привести к тому, что ваши документы будут выглядеть довольно странно. Поэтому прежде чем начать что-то предпринимать для исправления ошибок, убедитесь, что все браузеры, в том числе IE6 и 7, отображают страницу в стандартном режиме.

Отсутствие поддержки свойства min-height в IE6
Internet Explorer не поддерживает свойство min-height, задающее минимальную высоту элемента, а вместо этого интерпретирует значение свойства height в этом смысле. Таким образом, в других браузерах значение свойства height определяет фиксированную высоту элемента, а Internet Explorer 6 воспринимает его в качестве значения минимальной высоты, поэтому размер блока по вертикали может увеличиваться и превысить задуманные для него параметры. Чтобы избежать такой ситуации, достаточно использовать свойство height в таблице стилей для IE6 в том же качестве, что и свойство min-height в основной таблице стилей.

Свойство hasLayout
В движке IE6 и 7 есть таинственный компонент – свойство hasLayout, причина большого количества самых причудливых «багов». Существуют элементы, ответственные за размер и расположение содержащегося
в них контента; считается, что они обладают этим свойством. Прочие элементы определяют свой размер и расположение за счет родительского элемента или более отдаленного предка. Если элемент не определяет структуру своего содержимого, это может привести к странным последствиям – например, исчезновению части контента или неправильному отображению структуры документа. Некоторые элементы, среди которых ячейки таблицы, по умолчанию обладают свойством hasLayout, чего, однако, нельзя сказать об элементах div. Если элементу задать такие CSS-свойства, как float со значением left или right, он также начинает определять структуру документа, что приводит к решению большинства возникающих проблем. Самое главное – найти CSS-свойство, которое изменит статус элемента, но не повредит структуре документа. Для IE6 присвоить элементу свойство hasLayout можно, задав значение 1% его свойству height. Как уже было сказано выше, IE6 воспринимает свойство height как min-height, поэтому такое значение определит минимальную высоту элемента, что не окажет никакого влияния на структуру документа, а сам элемент по-прежнему сможет вместить весь необходимый контент. Конечно, такие правила нужно указывать в таблице стилей, предназначенной специально для IE6. IE7, напротив, совершенно верно обрабатывает свойство height, поэтому такой трюк в данном случае не сработает. Однако вместо этого можно задать любое, даже нулевое значение свойству min-height, что также изменит статус элемента в IE7. Это вполне надежный способ, поскольку значением свойства min-height по умолчанию также является 0. Не всегда удается сразу определить, какой элемент требует добавления такого «триггера» изменения статуса, но обычно виновника всех беспорядков на странице можно вычислить поступательно. Вначале я рассматриваю элементы с самой высокой степенью вложенности, т. е., если несколько блоков div вложены друг в друга, то я добавляю значение высоты для последнего из них, обновляю страницу и смотрю, привело ли это к каким-то изменениям. Если все осталось по-прежнему, я перехожу к div на уровень выше и т. д.

Относительное позиционирование элемента
Если изменение статуса элемента другими способами не дает желаемого результата, можно попробовать присвоить элементу свойство position со значением relative. Обратите внимание, что после этого все его
дочерние элементы будут располагаться относительно него. Если такой прием не нарушает дизайн сайта, вполне можно им воспользоваться.

Прочие ошибки
Приведенные выше приемы помогут вам решить самые серьезные проблемы, однако вы можете столкнуться и с менее значительными недостатками интерпретации, такими как неправильно рассчитанные отступы или незначительное смещение элементов. Самое время вспомнить о том, что вы имеете дело со старыми браузерами, выдающими кучу ошибок, поэтому не нужно бояться изменять правила стилей в специально предназначенных для них таблицах стилей, регулируя величину отступов или перемещая элементы до тех пор, пока не будет достигнут желаемый результат. Использование условных комментариев гарантирует отсутствие каких-либо сбоев при просмотре сайта в других браузерах. Надеюсь, вам не придется делать слишком много дополнительной работы такого рода, поскольку при изменении структуры страницы, скорее всего, придется все создавать заново; иногда приходится буквально по кусочкам собирать мозаику сложной страницы!

hasLayout

При слове IE6 каждый верстальщик тяжело вздыхает. Количество багов и глюков этого браузера огромными корявыми буквами вписано в историю веба. От самых простых (например проблемы с отступом плавающих блоков) до уж совсем странных и непонятных.

Вот наглядный пример странного поведения IE6. Имеем обычный HTML:

Стили браузера по умолчанию сброшены (это можно сделать, например, с помощью reset.css). Ничего странного, все выглядит одинаково во всех браузерах, в том числе и, как ни странно, в IE6.

Странности начинаются, если по какой-то причине ссылки нужно сделать блочными (например, чтобы для них вставить красивую фоновую картинку), т.е. прописать для них следующий CSS:

В IE6 между элементами списка появляются непонятные отступы. В живую можно посмотреть здесь (смотреть в IE6, конечно). Для тех счастливчиков, которые с радостными возгласами удалили IE6 со своего компьютера, ниже есть скриншоты:

Список блочных ссылок во всех браузерах кроме IE6. Список блочных ссылок в IE6.

Что же делать? Будем боротся с этим детищем Microsoft используя их же разработки!

В Microsoft Internet Explorer для Windows (в Internet Explorer для Mac OS этого нет) есть специальное свойство-флаг, управляя которым можно избавится от многих глюков IE6-7.

Определение hasLayout

Вот что говорит по этому поводу Microsoft: свойство hasLayout определяет наличие у элемента layout (надо же!).

Термин layout на русский язык можно перевести по-разному: планировка, расположение, слой, схема и т.д. В газетном деле этим термином обозначают расположение материала на странице. При интерпретации кода браузером (а конкретно ИЕ) наличие или отсутствие layout определяет поведение элемента относительно родительских элементов и его влияние на дочерних.

HasLayout это не CSS свойство, а как бы внутренний флаг, говорящий браузеру о наличии layout и в HTML и CSS напрямую никак не отраженный.

Отличия между элементами с layout и без него

Маркус Милке (Markus Mielke) из команды разработчиков IE в своей статье «HasLayout» Overview условно различает элементы на две категории:

  1. Элементы содержащие контент, размеры и отображение которых зависит от их родительских элементов
  2. Элементы отвечающие и за свои размеры и за организацию и визуализацию своего содержимого


Т. е. элементы, не имеющие layout, и элементы, его имеющие соответственно.

Как правило, элемент имеющий layout является прямоугольной областью, т.е. его присвоение строчному элементу приводит к тому, что элемент ведет себя как строчный блок (см. рисунок):

Строчный элемент не имеющий layout. Строчный элемент имеющий layout.

Как узнать, есть ли у элемента layout?

Ответы на этот вопрос предлагают разные: от подробного исследования всего css файла до использования специальных скриптов. Но мой же взгляд есть гораздо более простой метод. Поскольку о наличии и отсутствии layout мы начинаем задумываться, когда IE ведет себя неадекватно, то самый простой способ, это принудительно присвоить layout элементу и посмотреть, поможет ли это побороть глюк.

Элементы, имеющие layout изначально

Всегда имеют layout следующие элементы:

Управление hasLayout

Хотя нельзя присвоить hasLayout значения true/false непосредственно в коде, можно установить layout прописав элементу некоторые CSS свойства. «Выключить» hasLayout можно, только убрав у элемента все свойства, устанавливающие layout или присвоив им такие значения, которые layout не устанавливают. Перечень свойств и их значений, устанавливающих/не устанавливающих layout приведены в таблице ниже:

CSS свойство Значение устанавливающие layout Значение не устанавливающие layout Заметки
display inline-block все кроме inline-block
height любое значение кроме auto auto таким образом нельзя «включить» hasLayout для строчных элементов
float left или right none
position absolute любое значение кроме absolute
width любое значение кроме auto auto таким образом нельзя «включить» hasLayout для строчных элементов
writing-mode tb-rl lr-tb это свойство не проходит валидацию
zoom любое значение кроме normal normal это свойство не проходит валидацию

Нельзя забывать, что для некоторых тегов hasLayout всегда имеет значение true и сбросить его не удастся (см. перечень тегов приведенный выше).

К счастью, основная масса глюков возникает, когда элемент не имеет layout и достаточно его присвоить, чтобы элемент начал вести себя адекватно.

Хотя свойство hasLayout присутствует в IE любой версии, ошибки, связанные с ним, возникают, как правило, в IE6, реже в IE7, и для их исправления достаточно добавить элементу layout только для этих браузеров.

Каждый сам волен выбирать, каким образом присваивать элементу layout. Самый безопасный с точки зрения верстки способ, это присвоить свойство zoom со значением 1. Это свойство Microsoft присваивает элементу масштаб 100% который никак не влияет на элемент (правда строчные элементы начинают вести себя как строчные блоки, но это следствие не zoom:1, а присвоения им layout). Но это свойство не проходит валидацию и этот момент нужно учитывать.

Если искать валидное решение, то для строчных элементов можно применить display:inline-block. Oн и заставит строчные элементы вести себя как строчные блоки, но это уже не имеет значения, поскольку наличие layout уже заставляет элемент вести себя как строчный блок.

Для блочных элементов, у которых не заданы значения width/height, можно для IE6 прописать значение width:100%, или присвоить элементу какую-либо высоту height (1%, 1px, 0px). С высотой нужно быть аккуратным, если у блока задана высота 1px, то уже не стоит присваивать ему overflow:hidden.

Устраняем глюк с блочными ссылками в списках

В примере приведенном в начале статьи достаточно будет только для IE6 прописать для ссылок:

И IE6 (о чудо!) ведет себя как все остальные браузеры. Демо-пример

Что еще лечиться включением hasLayout

Добавлением layout лечатся глюки связанные с:

  • отображением «плавающих» блоков
  • отступами между элементами и их потомками
  • нестандартным поведением самих блоков
  • абсолютным и относительным позиционированием элементов и многим другим

Наиболее полный перечень таких глюков приведен в статье «On having layout» и все желающие могут с ним ознакомиться.

Выводы

Microsoft свойство hasLayout, используемое в браузере IE/Win позволяет определить наличие у элемента layout, который несет ответственность за отображение и размеры элемента и за отображение и размеры дочерних элементов, не имеющих layout. С помощью управления свойством hasLayout можно устранить многие странные глюки IE6-7. Знание этого свойства дает верстальщику мощное оружие в борьбе с IE, экономит время и сохраняет нервы!

Ошибка с блочными ссылками в IE6

Internet Explorer — это проблема, которая портит жизнь большинства веб-разработчиков. Более 60% времени разработки может уходить на решение этих специфичных проблем, что не является эффективным использованием времени. В этой статье я расскажу о самых популярных багах и несоответствиях при позиционировании, а также о том, как наиболее просто можно решить эти проблемы.

1. Позиционирование по центру.

Каждый веб-разработчик, при вёрстке сайта, сталкивался с необходимостью выровнять элемент по центру. Самый простой и популярный способ – это написать margin: auto;. Этот способ позволяет центрировать элемент независимо от разрешения экрана. Однако в IE6 этот способ не работает.

Рассмотрим следующий код:

Internet Explorer покажет вам следующее:

Это происходит потому что IE6 не распознаёт значение auto установленное свойству margin. К счастью, это легко пофиксить.

Исправляем.

Простейший и испытанный способ центрировать элемент в IE6 — это написать text-align: center для родительского элемента и применить text-align: left для него самого, чтобы его содержимое было выровнено корректно.

2. Эффект ступенек

Практически каждый разработчик использует списки для создания навигации. Обычно создаётся элемент-контейнер, внутри него необходимые ссылки, а затем устанавливается свойство float с необходимым направлением. Рассмотрим следующий пример:

Однако IE нам покажет:

Не очень дружелюбная навигация, не правда ли? Однако есть 2 способа пофиксить это неприятное поведение.


1-ый способ

Простейший способ — это установить свойство float не ссылкам, а элементам списка li.

2-ой способ

Второй способ — это применить свойство display: inline для элемента li. Дополнительно мы фиксим баг с двойным внешним отступом, который описан ниже.

3. Двойной отступ для элементов с установленным свойством float

Воспроизвети эту ошибку очень просто. Устанавливаем элементу float: left, а затем внешний отступ. В результате получаем отступ в два раза больше указанного.

В IE6 мы увидем следующее:

Исправляем

Исправляется это таким же образом как и проблема с эффектом ступенек. То есть устанавливаем свойство display: inline для элемента. Наш код изменится так:

4. Элементы с маленькой высотой.

Иногда необходимо создать элементы с маленькой высотой, например чтобы использовать их как элемент дизайна. Первый пришедший в голову способ — это установить высоту. Однако IE покажет вам совсем не то, что вы ожидаете.

В результате мы получаем элемент с высотой 2px и с границей в 1px.

Исправляем.

Причина этого бага очень проста: IE просто изменяет высоту элемента до высоты равной размеру шрифта. Таким образом просто устанавливаем размер шрифта равным нулю.

Второй подход

Ещё один хороший способ — это использовать свойство overflow, необходимо применить значение hidden. И тогда элемент будет необходимой высоты.

5. Overflow и относительное позиционирование элементов.

Этот баг проявляется в случае когда родительскому элементу установлено свойство overflow: auto, а дочерний позиционирован относительно него, то есть ему установлено свойство position: relative. При этом получается что дочерний элемент находится как бы поверх родительского. Давайте рассмотрим на примере:

Исправляем.

Простейший способ решить проблему — установить родительскому элементу относительное позиционирование.

6. Box Model

Internet Explorer неверно интерпретирует модель внешних и внутренних отступов — box model.

К примеру есть 2 элемента div. Один с исправленной ошибкой, а второй — нет. Между ними будет разница в размерах, равная сумме внутренних отступов.

Исправляем

Про корректную модель я расскажу в другой статье, сейчас же просто покажу как это исправить.

Смысл в том, что для IE5/6 высоту и ширину надо устанавливать отдельно. Я, например, делаю это так:

Для всех браузеров

Для IE надо делать так:

По существу, вы добавляете значения внутренних отступов к размерам элемента для IE6.

7. Установка минимальных размеров.

Минимальные ширина и высота просто незаменимы когда делаешь красивый дизайн. К сожалению, IE игнорирует свойства min-height и min-width.

Исправляем

Для решения проблемы воспользуемся идентификатором !important.

Второй вариант.

Если мы примем во внимание тот факт, что IE не понимает вложенные селекторы, то можно сделать так:

8. Неверное поведение в модели float.

Одна из самых главных концепций в бестабличной вёрстке используя CSS — это float. В большинстве случаев IE6 обрабатывает это корректно, но иногда бывают проблемы. Например когда контент неразрывный или ширина элемента больше, чем ширина родительского. В этих случаях разметка ломается. Давайте рассмотрим пример.

Как видите, первый div расширился по ширине контента и вытолкнул соседний на следующую строку.

Исправляем


Красивого решения нет. Но можно, например, применить свойство overflow: hidden, но тогда контент отсечётся и часть его не будет видно.

9. Лишнее пространство между элементами списка.

IE 6 добавляет лишние отступы в вертикальных списках. Рассмотрим пример.

Как это должно выглядеть:

Что показывает IE:

1-ый способ

Самый простой способ — это указать ширину или высоту для ссылки.

2-ой способ

Следующий способ — это установить float: left, а затем очисить его.

3-ий способ

Третий способ — это установить display: inline для элемента li. Что, кстати исправит ошибку с двойным внешним отступом, описанную выше.

Заключение

Надеюсь, что с помощью этой статьи я помог вам избежать некоторых проблем и сделал вашу жизнь чуточку проще :)

Ошибки в браузере IE6

До сих пор некоторые пользователи используют браузер IE6, поэтому иногда у заказчика возникает глупое желание (для верстальщика) приспособить свой сайт и под этот старый браузер. К счастью таких пользователей становится все меньше и меньше, а те, кто сидит на IE6 – пусть сидят и дальше. В этой статье приведены некоторые способы устранения ошибок для браузера IE6.

Стиль, заключенный в конструкцию, которая приведена ниже, будет работать только в браузере IE6.

Ошибка двойного поля

Браузер IE6 удваивает размер поля, который вы добавили к плавающему элементу. Поле удваивается там, куда перемещен плавающий элемент. Решение: добавить свойство display:inline плавающему элементу.

Трехпиксельный промежуток

Если рядом с плавающим столбцом, установлен блок, которому задана фиксированная ширина, то блок с фиксированной шириной сместится под плавающий столбец. Если вы посмотрите на изображение, изображение снято с браузера IE6, вы увидите, что фиксированный блок смещается под плавающий элемент. Это неприемлемо и данную проблему необходимо устранить.

Решение: у блока с фиксированной шириной необходимо удалить левое поле, у перемещаемого столбца нужно добавить отрицательное поле -3px.

Свойство zoom

Свойство zoom работает только в браузере IE6. Добавляет ‛разметку“ и устраняет многие проблемы, возникающие в браузере IE6. Данное свойство, как правило, необходимо добавить охватывающему элементу. Разметка восстанавливается, и внутренние блоки становятся видимыми.

Например, если определить ссылку как блочный элемент, браузер IE6 не делает пригодным всю площадь ссылки для щелчка. Это можно устранить, добавив следующий стиль:

Послесловие

Удобно создать отдельную таблицу стилей под браузер IE6. Для этого рекомендую ознакомиться со статьей отдельная таблица стилей для IE 6

В браузере IE6 возникает куча ошибок, особенно если ваш сайт построен блоками. Мои рекомендации: просто забудьте о существовании этого браузера. Однако, иногда возникают ситуация, когда требуется подготовить сайт для нормального отображения и в браузере IE6. Надеюсь, в этом случае вам помогут вышеописанные приемы.

10 возмутительных багов IE и пути их решения

Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.

А пока, я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.

1. Баг IE6, выдающий текст повторно

Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.

Есть множество способов решить эту проблему, но ни один из них мне не подходил, так как я работал над очень сложным проектом. И вот я нашел очень простой и интересный способ: я просто добавил ряд неразрывных пробелов прямо за оригинальным текстом.

Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

• обрамлять комментарии тегами
• удалять все комментарии
• в предшествующем элементе float указывать стиль
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)

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
Просмотров: 37461
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Проблема с ссылками на IE6 и IE7

Мне сложно с IE6 в последнее время по какой-то конкретной проблеме, вот бит html, на котором я нахожусь:

Все в порядке с Firefox и т.д., но ссылка не будет работать, щелкнув непосредственно на изображении в IE6 (но будет работать в другом месте по ссылке).

У кого-то есть идея?

  • edit: Это не работает в IE7:/


Спасибо за ваши ответы!
Мне нужен тег span. Я должен был объяснить немного больше, что я пытался сделать; вот оно:
Мне нужна коробка с возможностью клика. Внутри этого мне нужно:

  • еще один ящик с фиксированным размером, который будет содержать динамическое изображение (случайное соотношение)
  • некоторый текст

Я просто попробовал:

Удалить тег span, я не думаю, что вам это нужно

Если у вас есть контроль над разметкой, извлеките встроенные стили и используйте

В начале документа добавьте ссылку на внешнюю таблицу стилей

Создайте style.css и добавьте

Если вы используете этот стиль ссылки в нескольких местах, удалите идентификатор на div и замените на

И измените селектор в css С# на.

Если у вас есть проблемы только в IE6, вы также можете использовать условные комментарии для включения таблицы стилей, которая исправляет специфические проблемы IE6.

Как ни странно, удаление свойств ширины и высоты из диапазона позволяет вам щелкнуть по изображению.

Конечно, это полностью меняет макет, но может помочь решить проблему с IE.

Альтернативным методом будет использование div с фоновым изображением вместо элемента img:

Edit:

Решение фонового изображения не работает для изображения случайного отношения, которое вы упомянули в своем комментарии. Если вы просто хотите достичь макета в макете:

Я столкнулся с почти идентичной проблемой, создающей навигацию на сайте, управляемом контентом, но усугублялся тем фактом, что некоторые элементы навигации, которые необходимо было открыть в новых окнах, означало, что решение использовать javascript стало проблематичным.

В конце концов, я потерял тега и замены с помощью и установить фоновое изображение внутри диапазона (я мог бы использовать div, но эту плохую форму в соответствии с W3C).

Итак, вернемся к вашему первоначальному примеру, я бы пошел с:

Самый простой способ сделать эту область интерактивной — добавить позицию: относительно стиля вашей ссылки; чтобы сохранить стиль курсора в IE6, вы можете добавить курсор: рука к вашему элементу span.

Как и было предложено, лучше отделить стиль IE6 с условным блоком комментариев.

Надеюсь, это поможет и удачи;)

Я не смог решить это только с помощью CSS, я использовал Javascript, чтобы заставить область быть кликабельным. Разочаровывает, но хорошо, он работает.

Спасибо всем за вашу помощь! Я ценю это:)

Попробуйте применить свойство span css «zoom: 0;». Это работает в моем случае.

Случаи возникновения ошибки в IE: «Предполагается наличие идентификатора, строки или числа» (Expected identifier, string. )

Рассмотрим код в котором возникает ошибка. Причём ошибка только в браузере IE (у меня IE8), в остальных браузерах с этим нормально.

Это первый случай ошибки, который много где уже описан. Когда заканчивается перечисление переменных, то после последнего элемента не нужно ставить запятую. Internet Explorer считает это ошибкой и вообще не будет выполнять весь код, не откроет сайт (календарь FullCalendar в моём случае).

Но даже удалив запятую, ошибка не исчезнет. Именно этот случай у меня и возник (запятую ткнул для общности решения проблемы). При просмотре текста ошибки:

Error: Предполагается наличие идентификатора, строки или числа ( Expected identifier, string or number” )

Оказывается в браузере Internet Explorer слово delete — зарезервированное слово и просто так вводить переменную delete нельзя. Решение проблемы: заключить в одинарные кавычки, вот так — ‘delete’.

Правильный код, который будет работать в IE:

Using the word class as a key in a Javascript dictionary can also trigger the dreaded «Expected identifier, string or number» error because class is a reserved keyword in Internet Explorer.

When using a reserved keyword as a key in a Javascript dictionary, enclose the key in quotes.

Hope this hint saves you a day of debugging hell.

А здесь можно видеть список зарезервированных слов, чтобы уже не натыкаться (как видим save и close сюда не входят, поэтому их можем не брать в кавычки).

Список зарезервированных переменных для JavaScript, избегайте называть переменные зарезервированными словами!

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Илон Маск рекомендует:  Урок 2. Первая страница на HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL